CODEWITHSUNDEEP
javascriptjquerycheckbox
mati
mati

Reputation: 37

Jquery - Enable/disable multiple checkboxes in multiple lists

I have three lists in my page (ul.list1, ul.list2, ul.list3) and each li of every list has checkboxes. From the beginning I want to have all checkboxes disabled except from the ones in .list1.

The thought is that I have to select THREE .list1-checkboxes, then only ONE in .list2 and then AUTOCHECK the .list3-checkbox.

To be more specific if I click three .list1-checkboxes I want to disable the rest of the .list1-checkboxes and enable .list2-checkboxes. But if I uncheck one of the .list1-checkboxes I want to enable the rest .list1-checkboxes again and disable .list2-checkboxes whether I had already clicked on them or not.

Now if I select one .list2-checkbox I want the rest of the .list2-checkboxes to be disabled and in .list3 enable and autocheck the only one checkbox there is. If I uncheck the .list2-checkbox I want the the .list2-checkboxes to be enabled again and .list3-checkbox to be unchecked and disabled.

The HTML is something like that:

<div>
    <ul class="list1">
        <li><input type="checkbox" /><label>list1-item1</label></li>
        <li><input type="checkbox" /><label>list1-item2</label></li>
        <li><input type="checkbox" /><label>list1-item3</label></li>
        <li><input type="checkbox" /><label>list1-item4</label></li>
        <li><input type="checkbox" /><label>list1-item5</label></li>
    </ul>
</div>
<div>
    <ul class="list2">
        <li><input type="checkbox" /><label>list2-item1</label></li>
        <li><input type="checkbox" /><label>list2-item2</label></li>
        <li><input type="checkbox" /><label>list2-item3</label></li>
        <li><input type="checkbox" /><label>list2-item4</label></li>
        <li><input type="checkbox" /><label>list2-item5</label></li>
        <li><input type="checkbox" /><label>list2-item6</label></li>
        <li><input type="checkbox" /><label>list2-item7</label></li>
        <li><input type="checkbox" /><label>list2-item8</label></li>
    </ul>
<div>
</div>
    <ul class="list3">
        <li><input type="checkbox" /><label>list3-item1</label></li>
    </ul>
</div>

Upvotes: 1

Views: 4270

Answers (1)

Vigneshkumar Chinnachamy.M
Vigneshkumar Chinnachamy.M

Reputation: 63

Your requirements can be acheived through event handlers. You can find a list of events in this page : HTML DOM Events. And if you want to use jQuery to attach event handlers, you can read on() | jQuery API.

// Code goes here

$(function() {
  var list1 = $('.list1 > li > input[type="checkbox"]');
  var list2 = $('.list2 > li > input[type="checkbox"]');
  var list3 = $('.list3 > li > input[type="checkbox"]');
  list1.on('change', function(event) {
    var numList1 = $(list1).filter(':checked').length;
    if(numList1 >= 3) {
      $(list1).filter(':not(:checked)').prop('disabled', true);
      $(list2).prop('disabled', false);
    } else {
      $(list1).prop('disabled', false);
      $(list2).prop('checked', false).prop('disabled', true);
      $(list3).prop('checked', false).prop('disabled', true);
    }
  });
  list2.on('change', function(event) {
    var numList2 = $(list2).filter(':checked').length;
    if(numList2 >=1) {
      $(list2).filter(':not(:checked)').prop('disabled', true);
      $(list3).prop('checked', true).prop('disabled', false);
    }
    else {
      $(list2).prop('disabled', false);
      $(list3).prop('checked', false).prop('disabled', true);
    }
  });
});
<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div>
      <ul class="list1">
        <li>
          <input type="checkbox" />
          <label>list1-item1</label>
        </li>
        <li>
          <input type="checkbox" />
          <label>list1-item2</label>
        </li>
        <li>
          <input type="checkbox" />
          <label>list1-item3</label>
        </li>
        <li>
          <input type="checkbox" />
          <label>list1-item4</label>
        </li>
        <li>
          <input type="checkbox" />
          <label>list1-item5</label>
        </li>
      </ul>
    </div>
    <div>
      <ul class="list2">
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item1</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item2</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item3</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item4</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item5</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item6</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item7</label>
        </li>
        <li>
          <input type="checkbox" disabled/>
          <label>list2-item8</label>
        </li>
      </ul>
      <div></div>
      <ul class="list3">
        <li>
          <input type="checkbox" disabled/>
          <label>list3-item1</label>
        </li>
      </ul>
    </div>
  </body>

</html>

Upvotes: 0

Related Questions