【问题标题】:jQuery: Disable all checkboxes apart from current onejQuery:禁用除当前复选框之外的所有复选框
【发布时间】:2011-02-08 16:49:44
【问题描述】:

我有需要以与单选按钮控件类似的方式操作的复选框。基本上,当一个被选中时,所有其他的都需要被取消选中。我怎样才能以尽可能少的痛苦实现这一目标?

总结一下。如果选中了一个复选框,则必须取消选中所有其他(兄弟姐妹),使单击的一个检查状态保持不变。

我已经知道如何取消选中所有复选框,但如果我这样做了,我必须首先存储已选中复选框的选中状态,然后在取消选中所有复选框后重新应用它。我想知道是否有办法使用一些花哨的 jQuery 选择器或类似的方法来做到这一点。

【问题讨论】:

标签: javascript jquery html checkbox


【解决方案1】:

通过使用单选按钮。说真的,单选按钮的存在是有原因的。人们希望单选按钮是“n of n”选择,而复选框是“0 到 n”选择。

不管怎样,代码如下:

$('input:checkbox').click(function() {
    $(this).siblings('input:checkbox').removeAttr('checked');
});

演示:http://jsfiddle.net/ThiefMaster/AVEjt/

但是,请仅在您确实需要允许用户取消选中所有内容时使用它。那么它是可以接受的 - 否则单选按钮会更好。

【讨论】:

  • 我确信他有充分的理由使用它们。这实际上是评论而不是答案。
  • - 我的 -1 最终实际提供了帮助。
  • 我在发布“评论”半分钟后就包含了答案。 ;)
  • 感谢您的建议,但不适合将它们用于我的应用程序
  • @Thief 不需要.not(this)this 元素不是 $(this).siblings() 的一部分。
【解决方案2】:

试试这个:

$(':checkbox').not( selector_for_current ).attr('checked', false);

selector_for_current 是“当前”,通常是 this,如果您正在回调中。

【讨论】:

  • 我需要使用$(this) 还是只需要this 就足够了,因为它在jQuery 函数中?
  • 得到它的工作 - 伟大的代码谢谢 - 这正是我正在寻找的!
  • this 是 DOM 元素(在事件处理程序等内部),$(this) 是一个 jQuery 对象。作为.not() 参数,DOM 元素非常好。
【解决方案3】:

试试这个:

$(function() {
    $("input[type=checkbox]").click(function(){
        $(this).siblings("input[type=checkbox]:not(this)").attr("checked", "");
    });
});

example

【讨论】:

    【解决方案4】:

    作为 ThiefMaster 非常好的答案的替代方法,您可以在父表单上注册事件并捕获所有复选框,包括那些嵌套在使用“兄弟姐妹”会错过的字段集(或其他元素)中的复选框。

    $("#myform").click(function(e) {
        if ($(e.target).is("input:checkbox")) {
            $("input:checkbox", this).not(e.target).removeAttr("checked");
        }
    })
    

    演示:http://jsfiddle.net/Gs3wa/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-04-03
      • 2012-02-01
      • 2017-04-21
      • 2011-02-25
      • 1970-01-01
      相关资源
      最近更新 更多