Question

我有两个名称不同的复选框：

<input type="checkbox" name="checkbox1" value="checkbox1">
<input type="checkbox" name="checkbox2" value="checkbox2">

我希望实现代码，当选中checkbox1时，复选框2被禁用，当复选框2被选中时，复选框1被禁用。当它未经检查时，它也应该启用另一个。

如何使用jQuery或JavaScript实现？

Answer 1

首先，我假设你想做的工作无法通过Radio Buttons完成，因为这是显而易见的选择。万一它可以，这里有一些链接： http://wiki.answers.com/Q/What_are_the_differences_between_radio_buttons_and_checkboxes http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Checkbox 1: <input id="checkbox1" type="checkbox" onchange="onCheckboxChanged();"/>
Checkbox 2: <input id="checkbox2" type="checkbox" onchange="onCheckboxChanged();"/>
<script type="text/javascript">
    //Initialize checkboxes
    onCheckboxChanged();
</script>

JS：

var onCheckboxChanged = function(checkbox){
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');

    if(checkbox1.checked){
        checkbox2.disabled = true;
    }
    else {
        checkbox2.disabled = false;
    }

};

Answer 2

试试这段代码，

HTML，

<input type="checkbox" name="checkbox1" value="checkbox1"/>
<input type="checkbox" name="checkbox2" value="checkbox2"/>

的javascript，

$('[type="checkbox"]').click(function() {
    if ($(this).is(":checked")) {
        $('[type="checkbox"]').not(this).attr('disabled', 'disabled');
    } else {
        $('[type="checkbox"]').not(this).removeAttr('disabled');
    }

});

演示

http://jsfiddle.net/rsxXd/

Answer 3

这里是jquery示例http://jsfiddle.net/XnQzQ/

$('input[name=checkbox1]').click(function() { 
        if($('input[name=checkbox1]').is(':checked'))
        {
        $('input[name=checkbox2]').attr("disabled", "disabled")
        }
        else
         {
         $('input[name=checkbox2]').removeAttr( "disabled");
         }
    });
   $('input[name=checkbox2]').click(function() { 
    if($('input[name=checkbox2]').is(':checked'))
    {
    $('input[name=checkbox1]').attr("disabled", "disabled")
    }
    else
    {
     $('input[name=checkbox1]').removeAttr( "disabled");
    }
});

Answer 4

避免使用jQuery，只使用纯JavaScript。

<强> HTML：

<input type="checkbox" id="checkbox1" value="checkbox1" onchange="checker()" />
<input type="checkbox" id="checkbox2" value="checkbox2" onchange="checker()" />

<强> JavaScript的：

function checker() {
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');

    checkbox1.disabled = checkbox2.checked;
    checkbox2.disabled = checkbox1.checked;
}

演示： http://jsfiddle.net/fEpWJ/

Answer 5

简单使用jQuery：

$(document).ready(function() {
   var $cbs = $('input[type="checkbox"][name^="checkbox"]').click(function() {
       $cbs.not(this).prop('disabled', this.checked);
   });
});

演示：http://jsfiddle.net/j6Jpz/

虽然如果想要防止同时检查两个复选框，我建议如果你让两个都启用但是当一个人被自动检查时取消选中另一个，那么用户会更好：

$(document).ready(function() {
   var $cbs = $('input[type="checkbox"][name^="checkbox"]').click(function() {
      if (this.checked) $cbs.not(this).prop('checked', false);
   });
});

演示：http://jsfiddle.net/j6Jpz/1/

注意：我使用的选择器'input[type="checkbox"][name^="checkbox"]'表示要查找所有类型为checkbox的输入，其名称以“checkbox”开头。如果您为相关输入提供了一个公共类'input.someClass'，则可以简化为class="someClass"。

另请注意，我的任何版本的代码都会自动处理更大的复选框。

如何一个接一个地禁用复选框？

5 个答案: