I tried many of the ideas I found here to uncheck a checkbox when a different checkbox is checked, but none are working ...

Right I now I have :

$("#chkBox1").click(function () {
 if ($(this).is(":checked")) {
  $('#chkBox2').prop('checked', false); }
});

..but no results, chkBox2 remains checked

here is a checkbox in HTML:

<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />

one possible difference in my code is that the checkboxes are only added to the page when a button is clicked, using href...the checkboxes are in the HTML (not created in Javascript)..but are not visible until a button is clicked..may this be part of the problem? Or am I missing something else? Also, I am using JQuery Mobile.

I tried many of the ideas I found here to uncheck a checkbox when a different checkbox is checked, but none are working ...

Right I now I have :

$("#chkBox1").click(function () {
 if ($(this).is(":checked")) {
  $('#chkBox2').prop('checked', false); }
});

..but no results, chkBox2 remains checked

here is a checkbox in HTML:

<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />

one possible difference in my code is that the checkboxes are only added to the page when a button is clicked, using href...the checkboxes are in the HTML (not created in Javascript)..but are not visible until a button is clicked..may this be part of the problem? Or am I missing something else? Also, I am using JQuery Mobile.

• javascript
• jquery
• html
• jquery-mobile
• checkbox

• 1 Using ID's for checkboxes in JQM is probably a bad idea (using ID's in general isn't very safe in JQM due to the way page caching is handled in JQM). Most likely the correct element isn't beign selected. – Kevin B Commented Mar 29, 2013 at 15:41
• You can change $(this).is(":checked") to $(this).prop("checked") or even this.checked. It would be more direct, but shouldn't affect the outcome. – Kevin B Commented Mar 29, 2013 at 15:43
• @KevinB oh yeah.. didn't notice it was jqm - api.jquerymobile.com/pageinit – wirey00 Commented Mar 29, 2013 at 15:43

4 Answers 4

You need to refresh it after changing its' .prop, using .checkboxradio('refresh').

Demo

// Check #chkBox2 by default
$('#chkBox2').prop('checked', true).checkboxradio('refresh')

// Uncheck #chkBox2 when #chkBox1 is checked
$('#chkBox1').on('click', function () {
 if ($(this).is(':checked')) {
  $('#chkBox2').prop('checked', false).checkboxradio('refresh');
 }
});

• jQuery Mobile API reference

sorry, I should have kept reading!

this seems to do the trick:

  $('#chkBox1').checkboxradio('refresh');

..but I am not exactly sure why, is this something unique to JQuery Mobile?

Html

<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />
<input type="checkbox" name="art2" id="chkBox2" data-mini="true" data-theme="c" checked="checked" />

jQuery:

(function ($) {
$(document).ready(function () {
    $("#chkBox1").click(function () {
        if ($(this).is(":checked")) {
            $('#chkBox2').prop('checked', false);
        }
    });
});
})(jQuery);

Working example here http://jsfiddle.net/SwmN6/75/

You are checking this, and changing chkBox2:

if ($(this).is(":checked")) {
     $('#chkBox2').prop('checked', false); }

Try this instead:

if ($('#chkBox2').is(":checked")) {
     $('#chkBox2').prop('checked', false); }

Or simply:

$('#chkBox2').prop('checked', false);