需要有关复选框 onclick 的帮助 jquery

Question

尝试学习 jquery 并制作了一个带有功能的简单复选框，您可以在其中将所有选项设置为只读检查“none 以上”按钮。

<html>
  <body>

    <form id="diagnosedForm">
      <div>
      <input type="checkbox" value="1"/>1
      <br/>
      <input type="checkbox" value="2"/>2
      <br/>
      <input type="checkbox" value="3"/>3
      <br/>
    </form><br/>
    <input type="checkbox" value="" onclick="enableDisableAll(this);"/>None of the above

    <script src="script.js">
    </script>

  </body>
</html>

 function enableDisableAll(e) {
   var own = e;
   var form = document.getElementById("diagnosedForm");
   var elements = form.elements;

 for (var i = 0 ; i < elements.length ; i++) {
   if(own !== elements[i] ){
     if(own.checked == true){
       elements[i].disabled = true;
       elements[i].checked = false;
     }else{ 
       elements[i].disabled = false;  
       }
     }
   }
 }

这将是输出

最后一个复选框将使它成为只读

我想要相同的结果，但不点击 html 文件，而是使用 jquery 来解决。

Answer 1

您可以为“上面的none”复选框分配一个 id，然后在您的 script.js 中您可以这样做：

// script.js

// Run enableDisableAll() on toggle click
$('#toggle').click(enableDisableAll)

function enableDisableAll() {
  // Find all input elements inside "diagnosedForm"
  const elements = $('#diagnosedForm input')

  // Map thru inputs and toggle enable/disable state
  elements.map((_, el) => {
    $(el).prop('checked', false) // Reset checkboxes
    $(el).prop('disabled', (i, v) => !v)
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>

  <form id="diagnosedForm">
    <div>
      <input type="checkbox" value="1" />1
      <br/>
      <input type="checkbox" value="2" />2
      <br/>
      <input type="checkbox" value="3" />3
      <br/>
    </div>
  </form>
  <br/>
  <input id="toggle" type="checkbox" value="" /> None of the above
  
</body>

</html>

需要有关复选框 onclick 的帮助 jquery

Need help on Checkbox onclick jquery

html

javascript

checkbox

jquery