Question

我正在尝试使用复选框将Class添加到禁用的输入字段。但是，该类将应用于所有复选框，即使活动复选框也是如此。

我如何正确地将“红色”类添加到禁用的输入，然后在MAX小于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>

Answer 1

使用您当前的代码并进行一些小的更正（例如使用siblings selector），您将得到：

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>

Answer 2

由于我不熟悉三元组，因此我已经使用div { margin-left: 1.5rem; } label>input { display: none; } label:before { cursor: pointer; content: ""; padding: 7px; border: 1px solid #000; background-color: #fff; display: inline-block; margin-left: 2px; margin-right: 2px; vertical-align: top; } label.checked:before, label.intermediate:before { color: blue; border-color: blue; } label.checked:before { content: "\2713"; padding: 0px 3px; font-size: 10px; } label.intermediate:before { content: "\2012"; padding: 0px 4px; font-size: 11px; }完成了此操作，因此我将从选中的复选框中删除<div> <label><input type="checkbox" data-parent="-1" id="c1"/>Check Box 1</label> <div> <label><input type="checkbox" data-parent="c1" id="c2">Check Box 2</label> <label><input type="checkbox" data-parent="c1" id="c3">Check Box 3</label> </div> </div> <div> <label><input type="checkbox" data-parent="-1" id="c4">Check Box 1</label> <div> <label><input type="checkbox" data-parent="c4" id="c5">Check Box 2</label> <label><input type="checkbox" data-parent="c4" id="c6">Check Box 3</label> </div> </div>类。

if else

red

$(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');
    }
  });
});

Answer 3

使用下面的选择器选择所有禁用的输入：

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

addClass禁用复选框

3 个答案: