-1

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

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

我想实现代码，当复选框1被选中时，复选框2被禁用，当复选框2被选中时，复选框1被禁用。当它未被选中时，它也应该启用另一个。

如何使用 jQuery 或 JavaScript 实现？

4

5 回答 5

2

首先，我假设您想做的工作不能通过单选按钮完成，因为这是显而易见的选择。如果可以，这里有几个链接： 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;
    }

};
于 2012-07-11T03:17:18.903 回答
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/

于 2012-07-11T03:20:24.123 回答
1

这是 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");
    }
});
于 2012-07-11T03:24:10.370 回答
1

避免过度使用 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/

于 2012-07-11T03:24:15.280 回答
0

使用 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"]'，表示查找名称以“复选框”开头的所有复选框类型的输入。如果您为有问题的输入'input.someClass'提供了一个通用类 ,这可以简化为。class="someClass"

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

于 2012-07-11T03:30:32.897 回答