取消选中一个复选框后如何启用所有复选框？ 使用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='';
            }
        }
 }