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

Uncheck the checkboxes on a click of another checkbox – Jquery

I have a checkbox that, when clicked, will cause an entire section of checkboxes to become disabled and any checkbox in that section that is checked will become unchecked. This is my code for the checkbox:

 <input class="form-check-input" id="notInterest" type="checkbox" onclick="NoInterest(this)"> Not Interested

If the above checkbox becomes checked, then I want an entire section of checkboxes to be disabled and unchecked.

 <input class="form-check-input" type="checkbox" onclick="NoInterest(this)"> Not Intereted

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

              

        }
    </div>

This is the code that disables the section of checkboxes on the click of the "Not Interested" checkbox. Disabling of the checkboxes is working fine, but unchecking of the checkboxes is not working. Below is the jQuery code:

<script>
     function NoInterest(cb) {
            if (cb.checked == true) {
                $('#reassignChecks').addClass('disableSection');
                $('#reassignChecks').attr('checked', false);
                
            } else {
                $('#reassignChecks').removeClass('disableSection');
               
                $('#reassignChecks').attr('checked', true);
               
            }
        }

 </script>

Below is the screen shot of the web page:

enter image description here

In the above screen shot, on the click of the "Not Interested" checkbox, I want all the checkboxes in the div tag with id "reassignChecks" to become disabled and unchecked.

Tags:

2

Answers


  1. 0

    there are 2 things to tell =>

    1- you can check if there are checked inputs by class-name =>

    $(".class-name:checked").length

    2- detect if an input is checked or not =>

    $(".class-name").is(":checked")

    3- finally see the below snippet =>

    $(".other-input").on("change", function(){
  if ($(".other-input:checked").length) {
    $(".main-input").prop("checked", false);
  } else {
    $(".main-input").prop("checked", true);
  }
})

$(".main-input").on("change", function(){
  if ($(this).is(":checked")) {
    $(".other-input").prop("checked", false);
  }
})
    .other-inputs-section {
  margin-top: 30px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="main-input" type="checkbox" />
not interested

<div class="other-inputs-section">
  <div>
  1
    <input class="other-input" type="checkbox" />
  </div>
  
  <div>
  2
    <input class="other-input" type="checkbox" />
  </div>
  
  <div>
  3
    <input class="other-input" type="checkbox" />
  </div>
  
  <div>
  4
    <input class="other-input" type="checkbox" />
  </div>
  
  <div>
  5
    <input class="other-input" type="checkbox" />
  </div>
  
  <div>
  6
    <input class="other-input" type="checkbox" />
  </div>
</div>
    Login or Signup to reply.
  2. 0

    $('#reassignChecks').attr('checked', false); will not affect the checkboxes because #reassignChecks is a <div>.

    Instead you want to select all of the input[type="checkbox"] elements that are children of #reassignChecks and set their disabled attribute according to the checked/unchecked state of .form-check-input, as well as, presumably, set each of their :checked properties to false.

    $('#notInterest').on('change', function () {
  const isChecked = $(this).is(':checked');
  
  $('#reassignChecks').toggleClass('disableSection', isChecked);
  
  $('#reassignChecks input[type="checkbox"]')
    .attr('disabled', isChecked)
    .prop('checked', false)
  ;
});
    .disableSection {
  border: 1px solid red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" id="notInterest" type="checkbox"> Not Intereted

<div class="form-group row" id="reassignChecks">
  <input name="AreChecked" type="checkbox" value="0" /> 0
  <input name="AreChecked" type="checkbox" value="1" /> 1
  <input name="AreChecked" type="checkbox" value="2" /> 2
  <input name="AreChecked" type="checkbox" value="3" /> 3
  <input name="AreChecked" type="checkbox" value="4" /> 4
  <input name="AreChecked" type="checkbox" value="5" /> 5
  <input name="AreChecked" type="checkbox" value="6" /> 6
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search