选中“第一组”复选框后，未禁用输入提交。
选中“第一组”复选框后，未禁用输入提交。
提问于 2015-11-09 18:37:34
我有一个包含许多输入组的表单，除了第一个活动组之外，所有这些都是隐藏的。submit按钮实际上是下一个组，它应该在任何禁用的组中。我的问题是，在检查了第一组输入之后，submit按钮(nextbutton)保持活动状态，这是不对的。有人能帮忙吗？
<html>
<p>Button should be enabled if at least one checkbox is checked</p>
<div class="grp1">
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
</div>
<h1>group 2 is hidden and will be display after group 1 input is checked and
button should be enabled if at least one check_box is checked</h1>
<div class="grp2 " style="display:none;">
<div>
<input type="check_box" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
</div>
<p>the submit button only appears if a group has a class=hasSubmit. and disabled only if a checkbox checked</p>
<p>the problem is, after grp1 is checked and next to grp2 the submit button is undisabled</p>
<input class="nextButton" type="submit" value="Do thing" disabled>
</div>
</html>这是密码
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-10 03:17:23
以下是我从你的问题中了解到的：-
- 默认情况下，只有一个组是可见的，按钮被禁用。
- 选中组1的任何复选框时，应启用按钮。
- 单击按钮时，第2组变为可见的，该按钮再次被禁用。
- 如果未选中任何可见组的所有复选框，则应再次禁用该按钮。
基于此，您需要做的是在启用下一节后单击按钮时禁用该按钮。
$('input:checkbox').change(function () {
var doEnableButton = true;
$('div.hasSubmit:visible').each(function () {
if ($(this).find('input:checked').length === 0) {
doEnableButton = false;
return false; //break
}
});
if (doEnableButton) {
$('.nextButton').prop('disabled', false);
} else {
$('.nextButton').prop('disabled', true);
}
});
$('.nextButton').click(function (e) {
e.preventDefault();
if ($('.hasSubmit:hidden').length > 0) {
$('.hasSubmit:hidden:first').show();
$('.nextButton').prop('disabled', true);
} else {
//Submit the page
alert('Page submitted');
}
});为了演示起见，我将标题(h1)移到div.hasSubmit中。此外，我还在以下div.hasSubmit中添加了三个部分(即3 jsFiddle)：这里
Stack Overflow用户
发布于 2015-11-10 00:17:33
首先，纠正html布局，并将提交按钮放在每个组包装器中，在您的示例中，这个元素的类名为hasSubmit。
然后在复选框click事件中找到它，方法是遍历它的父容器，如下所示：
var checkboxes = $("input[type='checkbox']");
checkboxes.on("click", function () {
// read it when checkbox click event is fired, instead of on page load
var submitButt = $(this)
.closest(".hasSubmit")
.find("input[type='submit']");
submitButt.attr("disabled", !checkboxes.is(":checked"));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33615875
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号