Question

我没有得到如何做到这一点。

我有三个复选框，如果我点击其中一个，则应禁用其他复选框。我如何使用jQuery

实现这一目标

<input type="checkbox" name="box1" >
<input type="checkbox" name="box2" >
<input type="checkbox" name="box3" >

帮助我。

Answer 1

<强> jsFiddle 1

$('input[type="checkbox"]').click(function() {
    $(this).siblings().attr('disabled', true); 
});

<强> jsFiddle 2

或者，如果要在取消选中时启用复选框，可以使用：

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

Answer 2

我总是建议使用类名来引用DOM元素，这使您的代码更清晰，更不引人注目。此代码更全面，更易于维护：

<input type="checkbox" name="box1" class="check checker">
<input type="checkbox" name="box2" class="check">
<input type="checkbox" name="box3" class="check">

JS：

$('.checker').change(function() {
    $('.check').not(this).prop('disabled', this.checked);
});

在这种情况下，您可以更改复选框的位置（siblings方法将中断），其名称（[name^="box"]将失败），而无需修改JS代码。

http://jsfiddle.net/4krnh/

Answer 3

您可以使用：not（）过滤器排除点击的复选框。

$("input[type='checkbox']").click(function(){
    var name = $(this).attr("name");
    $("input[type='checkbox']:not(input[name='"+name+"'])").attr("disabled", "disabled");
});

Answer 4

<div>
    <input type="checkbox" name="box1" >
    <input type="checkbox" name="box2" >
    <input type="checkbox" name="box3" >
</div>

$('input[name^="box"]').click(function() {
    if($(this).is(":checked"))
        $(this).siblings().attr('checked', false);
})

修改：JSFiddle。

Answer 5

你可以试试这个，

$('input:checkbox').click(function(){
        $('input:checkbox').not($(this)).attr("disabled", true);
    });

Answer 6

试试这个

   $('input:checkbox').click(function() {
         $(this).siblings('input:checkbox').not(this).attr("disabled","disabled");
     });

JSFIDDLE DEMO

应该使用jQuery禁用三个复选框，onClick其他一个？

6 个答案: