Question

我无法工作......我知道有更简单的方法可以做到这一点，但这些都是我的约束。可能有两个以上的复选框（无限制），但只有在选中所有其他复选框时才能选中只读复选框。

<div class="shown">
  <input type="checkbox" value="TRUE" onclick="Signoffs();" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
  <input type="checkbox" value="TRUE" onclick="Signoffs();" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>
    Final signoff (should be ticked when both of the above are ticked)
    </h3>
<input type="checkbox" value="TRUE" id="AllSignedOff" name="AllSignedOff">

和JQuery

$(function() {
  Signoffs();
});

function Signoffs() {

  var notSHOWN = $('.shown').find('input').is(':checked').length > 0;

  if (notSHOWN) {
    $('#AllSignedOff').attr('checked');
  }
};

Answer 1

为了满足您的要求，您需要在选中复选框以及加载页面时运行代码。为此，您可以使用change事件。我还建议使用不显眼的Javascript代码将事件处理程序附加到过时的on*事件属性上。试试这个：

$(function() {
  $('.shown input').on('change', Signoffs);
  Signoffs();
});

function Signoffs() {
  var allChecked = $('.shown input').length > 0 && $('.shown input:checked').length == $('.shown input').length;
  $('#AllSignedOff').prop('checked', allChecked);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="shown">
  <input type="checkbox" value="TRUE" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
  <input type="checkbox" value="TRUE" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>Final signoff below (should be ticked and be read only when both of the above are ticked)</h3>
<input type="checkbox" disabled="disabled" value="TRUE" id="AllSignedOff" name="AllSignedOff">

请注意，您的小提琴使用的是非常旧版本的jQuery（1.5.2）。我强烈建议你将其升级到至少1.11，如上例所示。

Answer 2

你可以这样做。它不是最短的解决方案，但我认为全面：

$('input[type="checkbox"]:not([disabled])').click(function() {
    var checkboxes_cnt = $('input[type="checkbox"]:not([disabled])').length;
  var checkboxes_cnt_checked = $('input[type="checkbox"]:not([disabled]):checked').length;

  if (checkboxes_cnt === checkboxes_cnt_checked ) {
    $('#AllSignedOff').attr('checked', true);
  } else {
    $('#AllSignedOff').attr('checked', false);
  }
});

这里是你修改过的小提琴：http://jsfiddle.net/otg0kmru/5/

Answer 3

检查每次点击是否有任何未取消的输入：

＆＃13;

$(document).on('change', '.clickable', function() {
  $('#finalInput').prop('checked', allClickablesChecked());
});

function allClickablesChecked() {
  var unchecked = 0;
  $('.clickable').each(function() {
    if (!$(this).is(':checked')) {
      unchecked++;
    }
  });
  return unchecked === 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span>One: </span>
  <input type="checkbox" class="clickable" />
</label>
<br />
<label>
  <span>One: </span>
  <input type="checkbox" class="clickable" />
</label>
<br />
<label>
  <span>Final: </span>
  <input id="finalInput" type="checkbox" disabled />
</label>

＆＃13;

Answer 4

您应该使用JS而不是HTML aattribute添加事件，并使用live因为您正在使用的旧JQuery版本：

＆＃13;

$(function() {
  Signoffs();
});

function Signoffs() {
  $('#AllSignedOff').attr('checked', $('.shown input:checked').length === $('.shown input').length);
}

$(".shown input").live("change", function() {
  Signoffs();
});

＆＃13;

<div class="shown">
  <input type="checkbox" value="TRUE" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
  <input type="checkbox" value="TRUE" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>
Final signoff below (should be ticked and be read only when both of the above are ticked)
</h3>
<input type="checkbox" disabled="disabled" value="TRUE" id="AllSignedOff" name="AllSignedOff">

＆＃13;

Answer 5

要选中所有其他复选框上的禁用复选框，您必须计算总复选框和复选框，然后根据选中/取消选中禁用复选框进行比较。

请查看以下工作片段。

http://jsfiddle.net/otg0kmru/8/

＆＃13;

$("input[type='checkbox']").on("change",function(){
  if($("input[type='checkbox']:not(#AllSignedOff)").length == $("input[type='checkbox']:checked:not(#AllSignedOff)").length){
    $("#AllSignedOff").prop('checked', true);
  }else{
    $("#AllSignedOff").prop('checked', false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shown">
<input type="checkbox" value="TRUE" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
<input type="checkbox" value="TRUE" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>
Final signoff below (should be ticked and be read only when both of the above are ticked)
</h3>
<input type="checkbox" disabled="disabled" value="TRUE" id="AllSignedOff" name="AllSignedOff">

＆＃13;

选中两个复选框时，默认情况下应检查第三个复选框

5 个答案: