JQuery .prop 功能无法取消选中复选框

Question

我尝试了许多在此处找到的想法，以在选中另一个复选框时取消选中一个复选框，但没有一个有效...

现在我有：

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

..但没有结果，chkBox2 仍处于选中状态

这是 HTML 中的一个复选框：

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

我的代码中一个可能的区别是复选框仅在单击按钮时添加到页面中，使用 href...复选框在 HTML 中（不是在 Javascript 中创建的）..但直到 a单击按钮..这可能是问题的一部分吗？还是我错过了其他东西？另外，我正在使用 JQuery Mobile。

Answer 1

您需要在更改其'.prop 后刷新它，使用.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

Answer 2

对不起，我应该继续阅读！

这似乎可以解决问题：

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

..但我不确定为什么，这是 JQuery Mobile 独有的吗？

Answer 3

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

这里的工作示例http://jsfiddle.net/SwmN6/75/

Answer 4

您正在检查this，并更改chkBox2：

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

试试这个：

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

或者简单地说：

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