如何禁用一個接一個的復選框？

Question

我有兩個名稱不同的復選框：

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

我想實現以下代碼：在選中checkbox1時禁用checkbox2，在選中checkbox2時禁用checkbox1。 如果未選中，則應同時啟用另一個。

如何使用jQuery或JavaScript實現？

Answer 1

首先，我假設您想通過單選按鈕無法完成工作，因為這是顯而易見的選擇。 如果可以的話，這里有一些鏈接： 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”開頭的輸入。 如果您為相關輸入提供了通用類class="someClass" ，則可以將其簡化為'input.someClass' 。

還要注意，我的代碼的任何一個版本都將自動處理較大的復選框組。