CODEWITHSUNDEEP
javascriptjquery
Elaine Byene
Elaine Byene

Reputation: 4142

addClass to disabled checkbox

I'm trying to addClass to disabled input field using checkbox. However, the class gets applied to all the checkboxes even the active ones.

How do I correctly add the "red" class to the disabled input and then remove the class once the MAX is less than 2.

var MAX = 2;
    $('input.addnominee').click(function() {
        ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
        ($('input.addnominee:checked').length == MAX) ? $('.checkmark').addClass('red'):$('checkmark').removeClass('red');
    });
label {
  display: block;
}
.checkmark.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>

Upvotes: 0

Views: 566

Answers (3)

Ramesh
Ramesh

Reputation: 2403

Since I'm not familiar with ternary I've done this using if else, I am removing the red class from the checked checkbox.

$(document).ready(function() {
  var MAX = 2;
  $('input.addnominee').click(function() {
    if ($('input.addnominee:checked').length < MAX) {
      $('.checkmark').removeClass('red');
    }
    ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled', true): $('input.addnominee').not(':checked').attr('disabled', false);

    if (($('input.addnominee:checked').length == MAX)) {
      $('.checkmark').addClass('red');
      $('input.addnominee:checked+.checkmark').removeClass('red')
    } else {
      $('checkmark').removeClass('red');
    }
  });
});
label {
  display: block;
}

.checkmark.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>

Upvotes: 1

Akrion
Akrion

Reputation: 18515

Using your current code and making small corrections (like using siblings selector) you get:

var MAX = 2;
$('input.addnominee').click(function() {
  ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled', true) : $('input.addnominee').not(':checked').attr('disabled', false);
  ($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').siblings().addClass('red') : $('input.addnominee').siblings().removeClass('red');
});
label {display: block;}
.checkmark.red {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>
<label class="checkbox"> Add Nominee
  <input class="addnominee" type="checkbox">
  <span class="checkmark">Hello</span>
</label>

Upvotes: 2

Mohammad Mirzaee
Mohammad Mirzaee

Reputation: 111

Use below selector to select all disabled inputs : 

$('input:disabled').addClass('red');

Upvotes: 0

Related Questions