Need help on Checkbox onclick jquery

Question

trying to learn jquery and made a simple checkbox with a function where you can make all the options read-only checking on "none of the above" button.

<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;  
       }
     }
   }
 }

this will be the output

and the last checkbox will make it read-only

I want the same result but not putting onclick on the html file, instead using jquery to work it out.

Timur · Accepted Answer · 2022-03-03 18:02:17Z

1

You can assign an id to "none of the above" checkbox and then in your script.js you can do something like this:

// 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>

edited Mar 3, 2022 at 18:02

answered Mar 2, 2022 at 23:47

Timur

2,3071 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ian Lee Over a year ago

Thanks, Tim! Do you know how to put the reset function to the "None of the above" checkbox?

Timur Over a year ago

Sure, I have updated my answer.

Ian Lee Over a year ago

Thanks, Tim. I will look into these!

Collectives™ on Stack Overflow

Need help on Checkbox onclick jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related