0

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

// 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>
4

4 回答 4

1

有几点可以改进：

  1. 您应该关闭所有输入标签以避免呈现 HTML 文档时出现任何问题。
  2. for-loop应该运行直到i < (boxes.length - 1)避免选中 ToS 复选框。或者你可以只针对配料querySelectorAll('p input[type="checkbox"]')并从 开始var i = 0。
  3. 的右disable()括号位于 和 的右括号for-loop之间toggleCheckboxes()。
  4. Indisabled() #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;

};
于 2013-04-16T10:42:40.637 回答
0

问题不在禁用行中。

你想做什么if('') {？此外，在您的onload函数中，有一行：

'use strict';

你又想做什么？

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

于 2013-04-16T03:08:01.123 回答
0

如果您想在页面加载时禁用提交按钮，请尝试添加：

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

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

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

例如，如果您希望提交按钮在单击时禁用，这将起作用。

document.getElementById('submit').onclick = disabled;
于 2013-04-16T02:55:33.760 回答
0

如何使用 JavaScript 禁用 html 按钮？

我认为这个以前的解决方案可以帮助您动态禁用某些东西

于 2013-04-16T03:27:19.137 回答