如何禁用提交按钮？

Question

这是代码如何禁用提交按钮。 它似乎对我们不起作用。我希望能够在打开页面时禁用该按钮。 您对我们如何解决此问题有任何想法吗？

// Script 10.5 - pizza.js
// This script creates a master checkbox.

// Function called when the checkbox's value changes.
// Function toggles all the other checkboxes.
function toggleCheckboxes() {
'use strict';

// Get the master checkbox's value:
var status = document.getElementById('toggle').checked;

// Get all the checkboxes:
var boxes = document.querySelectorAll('input[type="checkbox"]');

// Loop through the checkboxes, starting with the second:
for (var i = 1, count = boxes.length; i < count; i++) {

    // Update the checked property:
    boxes[i].checked = status;

} // End of FOR loop.
}
} // End of toggleCheckboxes() function.

function disabled () {
    if ('')
    {document.getElementById('submit').disabled = false;}
    else
    {document.getElementById('submit').disabled = true;}


// Establish functionality on window load:
window.onload = function() {
'use strict';

// Add an event handler to the master checkbox:
document.getElementById('toggle').onchange = toggleCheckboxes;

document.getElementById('submit').disabled = disabled;

};

这是HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Operating Systems</title>
<!--[if lt IE 9]>
<script </script>
<![endif]-->
</head>
<body>
<!-- Script 10.4 - pizza.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Create Your Own Pizza</legend>
<div><label>Toppings</label> <input type="checkbox" name="toggle" id="toggle"        value="toggle"> All/None
<p><input type="checkbox" name="ham" id="ham" value="ham"> Ham
<input type="checkbox" name="mushrooms" id="mushrooms" value="mushrooms"> Mushrooms
<input type="checkbox" name="onions" id="onions" value="onions"> Onions
<input type="checkbox" name="sausage" id="sausage" value="sausage"> Sausage
<input type="checkbox" name="greenPeppers" id="greenPeppers" value="greenPeppers">  Green Peppers </p>
</div>
<input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.
<input type="submit" name="submit" value="Submit" id="submit">
</fieldset>
<div id="output"></div>
</form>
<script src="js/utilities.js"></script>
<script src="js/pizza.js"></script>
<script src="js/modal.js"></script>
</body>
</html>

Answer 1

如果要在页面加载时禁用提交按钮，请尝试添加以下内容：

document.getElementById('submit').disabled = true;

除非禁用的函数返回布尔值，否则以下行没有意义：

document.getElementById('submit').disabled = disabled;

例如，如果您希望在单击时禁用“提交”按钮，则此方法有效。

document.getElementById('submit').onclick = disabled;

Answer 2

问题不在禁用行中。

您尝试使用if('') {吗？ 另外，在onload函数中，有一行：

'use strict';

您打算再做什么？

参见： http : //jsfiddle.net/ByKEJ/

Answer 3

如何使用JavaScript禁用html按钮？

我认为以前的解决方案可以帮助您动态禁用某些功能

Answer 4

有一些可以改进的地方：

1. 您应该关闭所有输入标签，以避免呈现HTML文档时出现任何问题。
2. for-loop应一直运行到i < (boxes.length - 1)以避免选择ToS复选框。 或者，您可以使用querySelectorAll('p input[type="checkbox"]') 仅定位浇头，并从var i = 0 。
3. disable() toggleCheckboxes()括号位于for-loop和toggleCheckboxes()括号之间。
4. 在disabled() #terms被选中的情况下，您要检查是否已checked 。 如果是的话，启用提交按钮（ disabled = false ），否则禁用它（ disabled = true ）。
5. 最后，你要分配disabled()到#terms “ onclick因此它被称为每次复选框切换时间的函数。

演示 ： http : //jsfiddle.net/4Rwfs/1

的HTML

<form action="#" method="post" id="theForm">
<fieldset>
    <legend>Create Your Own Pizza</legend>
    <div>
        <label>Toppings</label>
        <input type="checkbox" name="toggle" id="toggle" value="toggle">All/None</input>
        <p>
            <input type="checkbox" name="ham" id="ham" value="ham">Ham</input>
            <input type="checkbox" name="mushrooms" id="mushrooms" value="mushrooms">Mushrooms</input>
            <input type="checkbox" name="onions" id="onions" value="onions">Onions</input>
            <input type="checkbox" name="sausage" id="sausage" value="sausage">Sausage</input>
            <input type="checkbox" name="greenPeppers" id="greenPeppers" value="greenPeppers">Green Peppers</input>
        </p>
    </div>
<input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.</input>
<input type="submit" name="submit" value="Submit" id="submit"></input>
</fieldset>
<div id="output"></div>
</form>

的JavaScript

// Script 10.5 - pizza.js
// This script creates a master checkbox.

// Function called when the checkbox's value changes.
// Function toggles all the other checkboxes.
function toggleCheckboxes() {
'use strict';

// Get the master checkbox's value:
var status = document.getElementById('toggle').checked;

// Get all the checkboxes:
var boxes = document.querySelectorAll('p input[type="checkbox"]');

// Loop through the checkboxes, starting with the second:
    for (var i = 0, count = boxes.length; i < count; i++) {

        // Update the checked property:
        boxes[i].checked = status;

    } // End of FOR loop.
} // End of toggleCheckboxes() function.

function disabled () {
    if (document.getElementById('terms').checked)
    {document.getElementById('submit').disabled = false;}
    else
    {document.getElementById('submit').disabled = true;}
}

// Establish functionality on window load:
window.onload = function() {
'use strict';

// Add an event handler to the master checkbox:
document.getElementById('toggle').onchange = toggleCheckboxes;

document.getElementById('submit').disabled = true;

document.getElementById('terms').onchange = disabled;

};