取消選中一個復選框后如何啟用所有復選框？ 使用JavaScript

Question

當我選中一個復選框時，所有代碼都被禁用，我的代碼可以正常工作。 現在，我希望如果我取消選中此選中的復選框，則所有復選框都應啟用。 這是我嘗試過的

<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '80' onclick='return(validate())'>Q- 80. Statute of Liberty is in ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '153' onclick='return(validate())'>Q- 153. Indias Republic day is celebrated on ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '65' onclick='return(validate())'>Q- 65. Popular Language is ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '150' onclick='return(validate())'>Q- 150. Girnar is located at ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '154' onclick='return(validate())'>Q- 154. Largest Waterfall ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '152' onclick='return(validate())'>Q- 152. Asia is an ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '139' onclick='return(validate())'>Q- 139. Diamond is made up of ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '123' onclick='return(validate())'>Q- 123. Largest Desert ? </td> </tr>

JS：這個JavaScript是當選中一個復選框時，全部被禁用。 反之亦然，當我取消選中復選框時，所有復選框均應啟用

function validate(){

            for (i=0; i<document.myForm.check1.length; i++){
                if (document.myForm.check1[i].checked !=true){
                    document.myForm.check1[i].disabled='true';
                }
            }
 }

Answer 1

<script>
    function validate(element){
        for (i=0; i<document.myForm.check1.length; i++){
            if (!(document.myForm.check1[i].checked)){
                document.myForm.check1[i].disabled=true;
            }
            if(!(element.checked)){
                document.myForm.check1[i].disabled=false;
            }
            element.disabled=false;
        }
    }
</script>
<form name="myForm" id="myForm">
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '80' onclick='return(validate(this))'>Q- 80. Statute of Liberty is in ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '153' onclick='return(validate(this))'>Q- 153. Indias Republic day is celebrated on ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '65' onclick='return(validate(this))'>Q- 65. Popular Language is ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '150' onclick='return(validate(this))'>Q- 150. Girnar is located at ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '154' onclick='return(validate(this))'>Q- 154. Largest Waterfall ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '152' onclick='return(validate(this))'>Q- 152. Asia is an ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '139' onclick='return(validate(this))'>Q- 139. Diamond is made up of ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '123' onclick='return(validate(this))'>Q- 123. Largest Desert ? </td> </tr>
</form>

嘗試這個

在For循環的First if條件中檢查是否已檢查每個元素，它將禁用未檢查的元素。

在第二個If條件中，它檢查是否未選中clicked元素並啟用所有元素。

最后，它啟用了clicked元素。

相當令人困惑，但達到了目的...

Answer 2

需要提及的幾件事：

• 確認結果后，最好保留該復選框為啟用狀態
• 您不需要將onclick添加到所有復選框-它效率不高，難以維護，並且會為每個這樣的聲明在后台生成匿名函數； 您可以將事件附加到所有復選框的父級，然后僅檢查事件的目標即可過濾掉所有不相關的元素。

這是我為您提供的解決方案：

的HTML

<form id="myForm">
  <table>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '80'>Q- 80. Statute of Liberty is in ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '153'>Q- 153. Indias Republic day is celebrated on ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '65'>Q- 65. Popular Language is ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '150'>Q- 150. Girnar is located at ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '154'>Q- 154. Largest Waterfall ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '152'>Q- 152. Asia is an ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '139'>Q- 139. Diamond is made up of ? </td> </tr>
    <tr> <td colspan='3'> <input type='checkbox' name='check1' value = '123'>Q- 123. Largest Desert ? </td> </tr>
  </table>
</form>

的JavaScript

function listen(element, event, callback) {
  if(element.attachEvent) { // IE
    element.attachEvent('on'+event, callback);
  } else { // W3C
    element.addEventListener(event, callback);
  }
}

var form = document.querySelector('#myForm');
listen(form, 'click', function(event){
  var checkBoxes, i, checked, target;
  target = event.srcElement || event.target; // IE or W3C 
  if(target.getAttribute('name') === 'check1') {
    checkBoxes = form.querySelectorAll('input[name="check1"]');
    checked = target.checked;
    for(i=0;i<checkBoxes.length;i++) {
      checkBoxes[i].disabled = checked && checkBoxes[i] !== target;
    }
    if(checked) {
      // Validate and do something with result (target.value)
    } else {
      // Reset validation and result
    }
  }
});

這是一個工作示例： http : //jsbin.com/iKiNenA/10/edit

注意：應該將<script>...</script>放在<form>...</form> ，以確保它在加載表單DOM后運行。 否則，將代碼包裝為document.onload = funciton() { ... }

使用jQuery，您可以將javascript代碼簡化為：

$(function() {

  $('#myForm').on('click', 'input[name="check1"]', function(event) {
    $('#myForm input[name="check1"]').prop('disabled', event.target.checked);
    event.target.disabled = false;
    if(event.target.checked) {
      // Validate and do something with result (event.target.value)
    } else {
      // Reset validation and result
    }
  });

});

示例： http ： //jsbin.com/iKiNenA/9/edit

在IE8 +，FF，Safari，Chrome（在Mac和Windows上）上進行了測試

Answer 3

如果您堅持使用JavaScript而不是jQuery，因為這在jQuery中可能非常簡單，請檢查此處：

http://jsfiddle.net/CYLmn/18/

function validate(thisobj){
        if(thisobj.checked==true){
            for (i=0; i<document.myForm.check1.length; i++){
                if (document.myForm.check1[i].checked !=true){
                    document.myForm.check1[i].disabled='true';
                }
            }
        } else {

            for (i=0; i<document.myForm.check1.length; i++){
                document.myForm.check1[i].disabled='';
            }
        }
 }