Question 10983 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

disable entire section of checkboxes if a check box is clicked – Jquery

I want to disable a section of checkboxes if the "not interested" check box is clicked. below is my code:

<div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested

</div>

<div class="form-group row" id="reassignChecks">
   @for (var i = 1; i <= 10; i++)

        {

            <input name="AreChecked" type="checkbox" value="@i" /> @i

            <br />

        }

        <button>Click</button>

            </div>

I have the following JavaScript:

function Reassign(cb) {

            if (cb.checked == true) {

                document.getElementById('reassignChecks').disabled = true;

            } else {

                document.getElementById('reassignChecks').disabled = false;

            }

        }

if I click on "Not Interested" check box then I want to disable the entire section that has an ID of "reassignChecks", but with the above JavaScript, this is not working. I dont want any of the checkboxes to be clicked in the reassignChecks section if Not Interested check box is clicked. below is the screen shot:

enter image description here

Tags:

3

Answers


  1. 0

    First:For a div dom ,it has not a disable attribute for you to control disable;

    Second: You should realize this by add or remove a css from the div,the css property is pointer-events

    .disable-region{
  pointer-events: none;
}

    and other color properties to imitate the disable function

    Login or Signup to reply.
  2. 0

    Try this one-

    function Reassign(cb) {
     if (cb.checked == true) {
                document.getElementById("reassignChecks").disabled = true;
                var nodes = document.getElementById("reassignChecks").getElementsByTagName('*');

                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].setAttribute('disabled', true);
                }

     } else {

                document.getElementById("reassignChecks").disabled = false;
    var nodes = document.getElementById("reassignChecks").getElementsByTagName('*');
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].removeAttribute('disabled');
            }
      }
 }
    <div>
<input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested

</div>

<div class="form-group row" id="reassignChecks">
   @for (var i = 1; i <= 10; i++)

        {

            <input name="AreChecked" type="checkbox" value="@i" /> @i

            <br />

        }

        <button>Click</button>

            </div>
    Login or Signup to reply.
  3. 0 
    function Reassign(cb) {
        
        
      if (cb.checked)
      {
         
         $('#reassignChecks').addClass('disableSection');

      }
      else
      {
          $('#reassignChecks').removeClass('disableSection');
      }

}
    .disableSection{
  pointer-events: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested
</div>

<div class="form-group row" id="reassignChecks" >
   @for (var i = 1; i <= 10; i++)
    {
      <input name="AreChecked" type="checkbox" value="@i" /> @i<br />

    }

 <button>Click</button>
</div>

    Try this code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search