1

我不知道如何做到这一点。

我有三个复选框，如果我单击其中一个，其他复选框应该被禁用。我如何使用 jQuery 来实现这一点

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

在这方面帮助我。

4

6 回答 6

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);
});
于 2013-02-01T09:29:20.833 回答
1

我总是推荐使用类名来引用 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/

于 2013-02-01T09:32:01.163 回答
0

您可以使用 :not() 过滤器来排除单击的复选框。

$("input[type='checkbox']").click(function(){
    var name = $(this).attr("name");
    $("input[type='checkbox']:not(input[name='"+name+"'])").attr("disabled", "disabled");
});
于 2013-02-01T09:24:17.637 回答
0 
<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。

于 2013-02-01T09:26:07.127 回答
0

你可以试试这个

$('input:checkbox').click(function(){
        $('input:checkbox').not($(this)).attr("disabled", true);
    });
于 2013-02-01T09:28:31.813 回答
0

试试这个

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

JSFIDDLE 演示

于 2013-02-01T09:33:53.357 回答