javascript 选中复选框时启用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33973512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable submit button when select checkbox
提问by Doran L
I have try a few examples of enable the submit button when checkbox is selected but i'm getting nowhere. Below is one of my attempts, where the submit button is disabled until the checkbox is selected. Please let me know what am i missing.
我尝试了一些在选中复选框时启用提交按钮的示例，但我一无所获。下面是我的尝试之一，在选中复选框之前禁用提交按钮。请让我知道我错过了什么。
function checked(sub1) {
var myLayer = document.getElementById(sub1);
var input = myLayer.childNodes[0];
if (input.checked == true) {
myLayer.disabled = "";
} else {
myLayer.disabled = "disabled";
}
}<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>
<p>
<input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>回答by Josh Crozier
Nobody has explained whyyour code isn't working.
没有人解释为什么您的代码不起作用。
For one, you aren't selecting the inputcheckbox element properly. It is not a child node of the button element. You could either get a reference to the checkbox by passing thisin the onchangeevent, or you could pass the eventobject and access the checkbox element through the event.targetproperty:
一方面，您没有input正确选择复选框元素。它不是按钮元素的子节点。你可以通过传递要么得到的复选框引用this的onchange事件，或者你可以通过event对象，并通过访问复选框元素event.target属性：
For example:
例如：
<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />
Then you can access a reference to the checkbox element that fired on the change event:
然后，您可以访问对更改事件触发的复选框元素的引用：
function isChecked(checkbox, sub1) {
// checkbox
}
After changing a couple things, it would work as expected:
更改几件事后，它将按预期工作：
function isChecked(checkbox, sub1) {
var button = document.getElementById(sub1);
if (checkbox.checked === true) {
button.disabled = "";
} else {
button.disabled = "disabled";
}
}
However, you can simplify the code and rewrite it to:
但是，您可以简化代码并将其重写为：
<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />
function isChecked(checkbox, sub1) {
document.getElementById(sub1).disabled = !checkbox.checked;
}
As a side note, I would highly suggest using unobtrusive JavaScript and add an event listener to the element in order to avoid inline onchangeevents:
作为旁注，我强烈建议使用不引人注目的 JavaScript 并向元素添加事件侦听器以避免内联onchange事件：
document.getElementById('termsChkbx').addEventListener('click', function (e) {
document.getElementById('sub1').disabled = !e.target.checked;
});
回答by Anik Islam Abhi
Try like this
像这样尝试
<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
JS
JS
function isChecked(chk,sub1) {
var myLayer = document.getElementById(sub1);
if (chk.checked == true) {
myLayer.disabled = false;
} else {
myLayer.disabled = true;
};
}
回答by Furqan Aziz
Here is the complete code
这是完整的代码
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script type = "text/javascript">
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = "";
} else {
btn.disabled = "disabled";
}
}
</script>
回答by Collins Abitekaniza
Try using this JQuery function
尝试使用这个 JQuery 函数
$(function() {
$('#termsChkbx').click(function() {
if ($(this).is(':checked')) {
$('#sub1').removeAttr('disabled');
} else {
$('#sub1').attr('disabled', 'disabled');
}
});
});
Example
例子
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" /></p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script>
$(function() {
$('#termsChkbx').click(function() {
if ($(this).is(':checked')) {
$('#sub1').removeAttr('disabled');
} else {
$('#sub1').attr('disabled', 'disabled');
}
});
});
</script>回答by Axel Napolitano
The major problem can be easily checked by using the browser's debug console. There you can immediately see an exception.
可以使用浏览器的调试控制台轻松检查主要问题。在那里您可以立即看到异常。
Try this:
试试这个：
Html:
网址：
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" onchange="checked('sub1', this.checked);" />
</p>
<p>
<input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>
JavaScript:
JavaScript：
function checked(sub1, checkedState) {
document.getElementById(sub1, this).disabled = !checkedState;
}
But be aware, that this code snippet is not best practice. It just solves your current problem without using libraries like jQuery.
但请注意，此代码片段不是最佳实践。它只是在不使用 jQuery 之类的库的情况下解决您当前的问题。
回答by jaunt
While your problem has been solved, there is no need for JavaScript here. This can be done with pure CSS/HTML:
虽然您的问题已经解决，但这里不需要 JavaScript。这可以通过纯 CSS/HTML 来完成：
input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
pointer-events: none;
tab-index: -1;
color: graytext;
}<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>I've used the :not()pseudo-class to detect when a check-box isn't ticked as this is w3c's recommended approach. I wasn't sure where (in HTML) the check box is in relevance to the button, so I used the tilde (~general sibling selector) to find the button. If the check-box is immediately before the button I would recommend using the adjacent sibling selector +instead.
我使用:not()伪类来检测何时未勾选复选框，因为这是w3c 的推荐方法。我不确定（在 HTML 中）复选框与按钮相关的位置，所以我使用波浪号（~一般同级选择器）来查找按钮。如果复选框就在按钮之前，我建议改用相邻的兄弟选择器+。
However if you have multiple check-boxes and you only want one check-box to toggle the button's state then using the :nth-of-typepseudo class or an idmay be more appropriate:
但是，如果您有多个复选框并且您只想要一个复选框来切换按钮的状态，那么使用:nth-of-type伪类或id更合适：
input[type="checkbox"]:nth-of-type(2):not(:checked) ~ input[type="submit"]{
pointer-events: none;
tab-index: -1;
color: graytext;
}<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>Otherwise all the check-boxes will be 'required' for the button to become click-able:
否则，所有复选框都将是“必需的”按钮才能点击：
input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
pointer-events: none;
tab-index: -1;
color: graytext;
}<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>