Geek Answers Handbook

JQuery.prop function does not work to uncheck

I tried a lot of ideas that I found here to uncheck when the box is checked, but no one works ...

Now I have:

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

.. but no results, chkBox2 remains checked

there is a checkbox in the HTML here:

 <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 the button is clicked using href ... the checkboxes are in HTML (not created in Javascript) .. but they don’t appear as long as the button is pressed .. maybe Is it a part of the problem? Or am I missing something else? In addition, I use jQuery Mobile.

+6
source share
5 answers

You need to update it after changing it to .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'); } });
+12
source

Sorry, I should have read!

this looks like a trick:

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

.. but I'm not quite sure why, is this something unique to jQuery Mobile?

+1
source

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);

A working example is here http://jsfiddle.net/SwmN6/75/

0
source

Not applicable to jQuery Mobile (missed OP comment on mobile), just standard jQuery.

Check checkbox 2 if checkbox 1 is unchecked and checkbox 2 is also unchecked

Otherwise, if box 1 is checked and box 2 is checked, box 2 is not checked

Flag 2 does not have the function of checking / unchecking flag 1.

Working example: http://jsfiddle.net/tuxzn/

works in chrome, FF, IE10

 <ol> <li> <input name="check[1]" type="checkbox" checked="checked" value="1" /> </li> <li> <input name="check[2]" type="checkbox" value="1" /> </li> </ol>

Detailed method

 (function($){ $(document).ready(function(){ $('input[name="check[1]"]').change(function(e){ if( $(this).is(':checked') ){ $('input[name="check[2]"]').prop('checked', false); }else{ $('input[name="check[2]"]').prop('checked', true); } }); }); })(jQuery);

Shorter method (with mobile phone) http://jsfiddle.net/Ag9Cn/

  $('input[name="check[1]"]').change(function(e){ $('input[name="check[2]"]').prop('checked', !!!$(this).is(':checked')) .checkboxradio('refresh'); //mobile support });
0
source

You check this and change 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);
-1
source

More articles:


All Articles