Develop Reference

Input checked attribute not working after confirm dialog cancel

I have a checkbox that when unchecked I want to confirm that the user intended to do so.
I am listening to the on.change event and use confirm() for the dialog. If the user clicks "Cancel" I have code to reset the checkbox. However, it is not obeying it. The 'checked="checked"' attribute is placed there as expected, but it does not appear as checked.
Here's a JSFiddle illustrating it:
https://jsfiddle.net/0tvzLbgk/9/
Below is the code.
$('#box').on('change', 'input', function() {
var $me = $(this);
if (this.checked) {
// Item has been checked, do nothing
}
else {
// Item has been unchecked
// Make sure it was not an accident
var confirmReset = confirm("Reset checkbox?");
if (confirmReset == true) {
// Okay, reset
}
else {
// Mistake, mark as checked again
$me.attr('checked', 'checked');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<input type="checkbox" />
</div>
Does anyone know why it's not following the checked attribute?

use .prop not .attr
$me.prop('checked', true);

Use prop() insead of attr() since you need to change the property here not the attribute :
$me.prop('checked', 'checked');
Hope this helps.
( Take a look to .prop() vs .attr() )
$('#box').on('change', 'input', function() {
var $me = $(this);
if (this.checked) {
// Item has been checked, do nothing
}
else {
// Item has been unchecked
// Make sure it was not an accident
var confirmReset = confirm("Reset checkbox?");
if (confirmReset == true) {
// Okay, reset
}
else {
// Mistake, mark as checked again
$me.prop('checked', 'checked');
$me.addClass('shift-input');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<input type="checkbox" />
</div>

How to disable the other items in a checkboxlist when one of them is selected using Javascript

i am using a checkbox list in a form.
i have multiple options in the checkbox list.
When one of the option is checked then other options should be disabled so that users should not be allowed to select other options.
i have done it in c# in the eventhandler but i cannot use postback anymore
how can we do this in javascript or jquery
foreach (ListItem li in chk_mycheckbox.Items)
{
if ((!(li.Text.ToString().Contains("Unknown"))))
{
li.Enabled = false;
}
}

Might you actually want a set of radio buttons instead.
e.g.
<li><input type="radio" name="gender" value="male">Male</li>
<li><input type="radio" name="gender" value="female">Female</li>
As it will enforce only one selection.
However, in your current scenario you could use the following lines to loop over the checkboxes and disable any that are not selected. (this is using jquery 1.6+)
$('input[type=checkbox]').each(function () {
if(!$(this).is(':checked')){
//if not checked
$(this).prop('disabled', true);
}
});
Following on from your comment.
Give the tick boxes that should disable the others an extra class e.g. "single-selection". Then your code can look something like this:
$(document).ready(function() {
$('#formId input.single-selection').on('click', function (e) {
var selectedCheckbox = $(this);
if(selectedCheckbox.is(':checked')){
$('#formId input[type=checkbox]').each(function () {
if(selectedCheckbox[0] != $(this)[0]){
//if not selected checkbox
$(this).prop('disabled', true);
$(this).attr('checked', false);
}
});
}else{
$('#formId input[type=checkbox]').prop('disabled', false);
}
});
});
I've not tested it, but I believe this is what you need. Just replace the ids and classes with what you're using.

Assuming you want the other options to become enabled if the user deselects the selected option, you could try this code. The code assumes that your form has an ID of 'form1'
$('#form1 input').on('click',function(evt){
var clickedEl = evt.target;
if(clickedEl.checked){
$('#form1 input').each(function(){
$(this).attr('disabled',true);
});
$(clickedEl).attr('disabled',false);
}
else{
$('#form1 input').each(function(){
$(this).attr('disabled',false);
});
}
});
Note that in jquery, the each function allows you to pass it a function that will be called on each element matched by the selector.
Here is a jsfiddle with the code working: http://jsfiddle.net/vvt5g/

Agree with Andrew's answer, that is the functionality of radio buttons.
In any way, going further, you will need to also control if the user has unchecked the checkbox.
Given a list of checkboxes as:
<input type='checkbox' >A
<input type='checkbox' >B
<input type='checkbox' >C
<input type='checkbox' >D
The script part could work like this:
<script>
var checked = false; //will save current state of checkboxes
$('input:checkbox').click(function(){
//if one was checked and then unchecked will enable all and return
if(checked)
{
$('input:checkbox').each(function(){
$(this).prop('disabled', false);
});
checked = false;
return;
}
//if none was checked before, disable the rest
$('input:checkbox').each(function(){
if(!$(this).is(':checked')){
$(this).prop('disabled', true);
}
else
checked = true;
});
});
</script>
FIDDLE

I have created a JsFiddle for you:
http://jsfiddle.net/jK4NE/
In short, I added a class myCheckBox on each checkBox and added the below jQuery code on Click:
$('.myCheckBox').click(function(){
var currentId = $(this).attr('id');
$('.myCheckBox').each(function(){
if($(this).attr('id') != currentId){
$(this).attr("checked", false);
}
});
});
If you have checkBoxes under a particular ID then you can target the same by using
#YourID input:checkbox
Example:
$('#YourID input:checkbox').click(function(){
var currentId = $(this).attr('id');
$('#YourID input:checkbox').each(function(){
if($(this).attr('id') != currentId){
$(this).attr("checked", false);
}
});
});

try this
HTML:
<ul>
<li><input type="checkbox" name="gender" value="male">Male</li>
<li><input type="checkbox" name="gender" value="female">Female</li>
</ul>
jQuery Code
$('input').change(function(){
if( $(this).prop('checked') ){
$(this).parent().parent().find('input').prop('disabled', true);
$(this).prop('disabled', false);
}
});
Demo

This is how you do
$(document).ready(function () {
var checked = false;
$('#<%=lstExposureValue.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Unknown';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (checked) {
$("#<%=lstExposureValue.ClientID%> input").removeAttr('disabled');
checked = false;
return;
}
else {
$("#<%=lstExposureValue.ClientID%> input").attr('checked', false);
$(this).attr('checked', true);
$('#<%=lstExposureValue.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
checked = true;
}
}
});
});

hide div when no checkbox is checked

I am trying to show hidden text if at least one checkbox is checked and hide it if none are checked. I have a multiple checkboxes.The hidden text isn't showing when I check the checkooxes. Any help?
Here is fiddle http://jsfiddle.net/HDGJ9/1/
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<div class="txt" style="display:none">
if($('input[name="ch[]"]').is(':checked'))
$(".txt").show(); // checked
else
$(".txt").hide(); // unchecked

Enclose/wrap your code with event handler like
$('input[name="ch[]"]').on('change', function () {
//your code
});
JSFiddle

You can just check the length of checked checkboxes...
var $checkboxes = $(':checkbox');
$checkboxes.on('change', function(){
$('.txt').toggle( $checkboxes.filter(':checked').length > 0 );
});

Nothing is executing your javascript code. There are many ways to execute, and also many ways to achieve the result you want. You can assign it to a click or change event like so:
$("input[name='ch[]']").click(function() {
if($('input[name="ch[]"]').is(':checked'))
$(".txt").show(); // checked
else
$(".txt").hide(); // unchecked
});
Here is an updated fiddle that checks your function everytime you click.

In your code, the test for checked/unchecked boxes occurs only once, when the page loads. You should run this check every time the value of any of the checkboxes changes. Something like
function refresh() {
if ($('input[name="ch[]"]').is(':checked')) {
$(".txt").show(); // checked
} else {
$(".txt").hide(); // unchecked
}
}
$('input:checkbox').change(refresh);
JSFiddle: http://jsfiddle.net/MHB8q/1/

You are selecting all four checkbox elements here, you need to only select one that is checked, and see if you get a result:
if($('input[name="ch[]"]').filter(':checked').length){
$(".txt").show(); // checked
} else {
$(".txt").hide(); // unchecked
}

Demo: http://jsfiddle.net/HDGJ9/10/
$('input[name="ch[]"]').on('change', function() {
if ($(this).is(':checked')) {
$('.txt').css('display', 'block');
}
else {
var checked = false;
$('input[name="ch[]"]').each(function(i, el) {
if ($(el).is(':checked')) checked = true;
});
if (!checked) $('.txt').css('display', 'none');
}
});

Version with the least amount of event handlers:
$(document).on("change", ":checkbox", function(){
var isAtLeastOneCheckboxChecked = $(':checkbox').filter(":checked").length > 0;
if (isAtLeastOneCheckboxChecked)
$('.txt').show();
else
$('.txt').hide();
});
Fiddle: http://jsfiddle.net/3d79N/

jquery uncheck and check and vise versa checkbox of child element

Here is my html
#This will be generated throught loop
<li class="selector">
<a>
<input type="checkbox" value="test" /> test
</a>
</li>
Here is my jquery click event
$('.selector').on('click', function() {
if($(this).find('input').is(':checked')){
#uncheck the checkbox
}else{
#check the checkbox
}
});
How do I uncheck if checked and check if unchecked

Try
$(document).on('click', '.selector', function (e) {
if (!$(e.target).is('input')) {
$(this).find('input').prop('checked', function () {
return !this.checked;
});
}
});
Demo: Fiddle
Another way
$(document).on('click', '.selector', function (e) {
$(this).find('input').prop('checked', function () {
return !this.checked;
});
});
$(document).on('click', '.selector input', function (e) {
e.stopPropagation();
});
Demo: Fiddle

Try this
$('.selector').on('click', function() {
var checkbox = $(this).find(':checkbox');
if($(checkbox).is(':checked')){
$(checkbox).prop('checked', false);
}else{
#check the checkbox
$(checkbox).prop('checked', true);
}
});

I don't understand why you are trying to do this with JavaScript. If the user clicks directly on the checkbox it will automatically check/uncheck itself, but if you add code to check/uncheck it in JS that would cancel out the default behaviour so in your click handler you'd need to test that the click was elsewhere within the .selector.
Anwyay, the .prop() method has you covered:
$('.selector').on('click', function(e) {
if (e.target.type === "checkbox") return; // do nothing if checkbox clicked directly
$(this).find("input[type=checkbox]").prop("checked", function(i,v) {
return !v; // set to opposite of current value
});
});
Demo: http://jsfiddle.net/N4crP/1/
However, if your goal is just to allow clicking on the text "test" to click the box you don't need JavaScript because that's what a <label> element does:
<li class="selector">
<label>
<input type="checkbox" value="test" /> test
</label>
</li>
As you can see in this demo: http://jsfiddle.net/N4crP/2/ - clicking on the text "test" or the checkbox will toggle the current value without any JavaScript.

Find other checkbox

Please see coments in js code.
I have two checkboxes
<input type="checkbox" name="first" id="first" />
<input type="checkbox" name="second" id="second" />
Here is my javascript
$(function() {
$('input[type=checkbox]').click(function() {
/*
HERE i want to manipulate the checkbox which is not clicked
NOTICE: they are only two checkboxes in page
I know that I can do something like this
if($(this).attr('id') == "first) {
do something
} else {
etc...
}
But I think that way is against DNRY
Can you recommend me some more elegenat solution ?
/*
}
});
});

You just want to use .not to filter out the currently clicked item (this)
$(function() {
var checkboxes = $('input[type=checkbox]');
checkboxes.click(function() {
var notclicked = checkboxes.not(this);
}
});
http://jsfiddle.net/infernalbadger/amz7f/

You could do:
$('input[type=checkbox]').click(function() {
/*
HERE i want to manipulate the checkbox which is not clicked
NOTICE: they are only two checkboxes in page
I know that I can do something like this
if($(this).attr('id') == "first) {
do something
} else {
etc...
}
But I think that way is against DNRY
Can you recommend me some more elegenat solution ?
*/
//you can get the other checkbox by filtering out the element you clicked
//in this case i hide it
$('input:checkbox').not(this).hide();
});

You can use the .not() function to exclude the current/clicked checkbox. eg.
$(function() {
var $checkboxes = $('input[type=checkbox]')
$checkboxes.click(function() {
var $other = $checkboxes.not(this);
...
});
});