请参阅http://jsfiddle.net/otg0kmru/1/
我无法工作......我知道有更简单的方法可以做到这一点,但这些都是我的约束。可能有两个以上的复选框(无限制),但只有在选中所有其他复选框时才能选中只读复选框。
<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');
}
};
答案 0 :(得分:3)
为了满足您的要求,您需要在选中复选框以及加载页面时运行代码。为此,您可以使用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,如上例所示。
答案 1 :(得分:1)
你可以这样做。它不是最短的解决方案,但我认为全面:
$('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/
答案 2 :(得分:0)
检查每次点击是否有任何未取消的输入:
$(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;
答案 3 :(得分:0)
您应该使用JS而不是HTML aattribute添加事件,并使用live
因为您正在使用的旧JQuery版本:
$(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;
答案 4 :(得分:0)
要选中所有其他复选框上的禁用复选框,您必须计算总复选框和复选框,然后根据选中/取消选中禁用复选框进行比较。
请查看以下工作片段。
http://jsfiddle.net/otg0kmru/8/
$("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;