stackoom
  简体   繁体   中英

How can I disable the submit button?

 原文  2013-04-16 02:46:16  9   4    javascript

Question

Here is the code How can I disable the submit button. It doesn't appear to be working for us.I want to be able to have the button disabled when the page is brought up. Do you have any ideas on how we can fix this? 

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

};

Here is the 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 answers

solution1
 0  2013-04-16 02:55:33

If you want to disable the submit button on page load, try adding this: 

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

The following line doesn't make sense unless the disabled function returns a boolean: 

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

For example, this would work if you wanted the submit button to disable on click. 

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

solution2
 0  2013-04-16 03:08:01

The problem is not in the disable line.

What did you trying to do with if('') { ? Also, in your onload function, there is a line : 

'use strict';

What are you trying to do again?

See : http://jsfiddle.net/ByKEJ/

solution3
 0  2013-04-16 03:27:19

How to disable html button using JavaScript?

I think this previous solution can help you dynamically disable something

solution4
 0 ACCPTED  2013-04-16 10:42:40

There are a few things that could be improved:

  1. You should close all your input tags to avoid any issues rendering the HTML document.
  2. The for-loop should run until i < (boxes.length - 1) to avoid selecting the ToS checkbox. Or you could target just the toppings with querySelectorAll('p input[type="checkbox"]') and start from var i = 0 .
  3. The closing bracket for disable() is between the closing brackets for the for-loop and toggleCheckboxes() .
  4. In disabled() #terms is selected, you want to check if it is checked or not. If it is, enable the submit button ( disabled = false ), else disable it ( disabled = true ).
  5. Finally, you'll want to assign disabled() to the #terms ' onclick function so it is called every time the checkbox is toggled.

Demo : 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;

};

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I disable action form when click button submit? How can I disable submit button until document is attached to browser? How can i disable the upload validation on submit ? How can I disable validation on submit? Using Redux Form, how can I disable the submit button if no fields have been filled out? How can I disable the submit button until text is entered in the input field? How can I enable a submit button if any checkbox is checked and disable it when none checkbox is checked? How can I disable submit form button until form is filled using jquery? How can I disable submit button after required html5 return true on the javascript? How to disable submit button with jquery?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM