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

Posted 2023-05-08

【中文标题】JQuery .prop 功能无法取消选中复选框

【英文标题】：JQuery .prop function not working to uncheck box

【发布时间】：2013-03-20 08:14:27

【问题描述】：

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

现在我有：

$("#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。

【问题讨论】：

在 JQM 中为复选框使用 ID 可能是个坏主意（由于 JQM 中处理页面缓存的方式，在 JQM 中使用 ID 通常不是很安全）。很可能没有选择正确的元素。

您可以将$(this).is(":checked") 更改为$(this).prop("checked") 甚至this.checked。它会更直接，但不应该影响结果。

@KevinB 哦，是的.. 没注意到它是 jqm - api.jquerymobile.com/pageinit

【参考方案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

【讨论】：

+1 这是关于您的答案为何有效的文档jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html

谢谢，我在你打字的时候就想出了这个答案！

这是正确的 jQuery Mobile 方式

@Gajotres 你仍然是 #1 好友 ;)

【参考方案2】：

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

这似乎可以解决问题：

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

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

【讨论】：

这确实应该是对下面答案的评论.. 但是如果您查看文档jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html 它表明您需要调用刷新

ps 我看到有人同时以同样的方式回答了这个问题！

【参考方案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/

【参考方案4】：

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

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

试试这个：

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

或者简单地说：

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

【讨论】：

这其实是指#chkbox1