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

How to disable html button using JavaScript?

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

Answer 4

有一些事情可以改进：

您应该关闭所有输入标记，以避免呈现HTML文档时出现任何问题。
for-loop应该一直运行到i < (boxes.length - 1)，以避免选中ToS复选框。或者您可以使用querySelectorAll('p input[type="checkbox"]')定位只是配件，并从var i = 0开始。
disable()的右括号位于for-loop和toggleCheckboxes()的右括号之间。
选中disabled() #terms后，您需要检查它是否为checked。如果是，请启用提交按钮（disabled = false），否则将其停用（disabled = true）。
最后，您需要将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;

};

如何禁用提交按钮？

4 个答案:

HTML

的JavaScript