Disable a html form submit button, to enable with a ticked checkbox

1
votes

I am trying to disable a submit button, and have it be enabled when a checkbox is ticked. Simple example works on jsfiddle

http://jsfiddle.net/8YBu5/522/

But not when trying it in my template (with bootstrap etc).

My template has the checkbox

<input type="checkbox"  id="checky"><a href="#">terms and conditions</a>

Then the button

<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>

Then the javascript. Does the javascript need to be at the top or something?

<script type="text/javascript">
    $('#submit').attr("disabled","disabled");

    $('#checky').click(function(){

        if($(this).attr('checked') == true){
             $('#submit').removeAttr('disabled');
        }
        else {
            $('#submit').attr("disabled","disabled");   

        }
    });
    </script>

Anyone see where I'm going wrong?

Thanks

UPDATE Thanks for all the suggestions, I've now tried adding the $(document).ready(function() { to the start of my script and changed .attr to .prop , still not working. Little more info: The button isn't disabled from the start, so maybe I'm not referencing the button properly in the function?

UPDATE2 I've tried adding an alert to see if my javascript is being run, but the alert doesn't show, what could this mean?

 <script type="text/javascript">
$(document).ready(function() { 
    alert("Welcome");
    $('submit').prop("disabled", true);
    $('checky').click(function(){
        if($(this).attr('checked') == true){
            $('submit').prop("disabled", false);
        }
        else {
            $('submit').prop("disabled", true);
        }
    });
});

UPDATE3 The javascript is now running, I've added two alerts, to see what is executing.

//<![CDATA[ 
$(window).load(function(){
$('#postme').attr("disabled","disabled");

$('#checky').click(function(){

    if($(this).attr('checked') == true){
        alert( "w" );   
         $('#postme').removeAttr("disabled");
    }
    else {
      alert( "e" );   
        $('#postme').attr("disabled","disabled");   

    }
});
});//]]>

When I click the checkbox on or off, I get the e alert, telling me the if statement is always false. Any ideas why?

UPDATE4 The snippet works, just not in my page, alert 2 is always executed, never alert 1 Title 

<link href="/static/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="container">


        <div class="row padding">
            <div class="col-md-12">
                <h1></h1>
            </div>
        </div>

        <div class="row padding">

            <form id="new_form" action="/page/" method="POST" >

              <div class="panel panel-success">
                <div class="panel-heading">
                  <h3 class="panel-title"></h3>
                </div>

                <div class="panel-body">
                  <div class="col-md-12"> 

                </div>
              </div>
            </div>

              <div class="panel panel-info">
                <div class="panel-heading">
                  <h3 class="panel-title">Creator submission form</h3>
                </div>

                <div class="panel-body">
                  <div class="col-md-12"> 

                  </div>
                </div>
              </div>
            <br>

               <input type="checkbox"  id="checky1">
               <input type="submit" id="postme1" value="submit">

                        </form>
        </div>

        <div class="row padding">
            <div class="col-md-12">

            </div>
        </div>              
    </div>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#postme1').attr("disabled","disabled");

$('#checky1').click(function(){

    if($(this).attr('checked') == true){
         $('#postme1').removeAttr('disabled');
    }
    else {
        $('#postme1').attr("disabled","disabled");   
    }
});
});//]]>  

</script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>

<div class="container">
  <footer>
  <hr>

  </footer>
</div>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#postme1').attr("disabled","disabled");

$('#checky1').click(function(){

    if($(this).attr('checked') == true){
      alert("1");
         $('#postme1').removeAttr('disabled');
    }
    else {
      alert("2");
        $('#postme1').attr("disabled","disabled");   

    }
});
});//]]>  

</script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>

</body>
</html>
3
javascripthtmltwitter-bootstrapbuttoncheckbox
$(document).ready(function() { ....your JQuery... }); - learn.jquery.com/about-jquery/how-jquery-works/… - gvee
You should also be using prop rather than attr -- .prop("disabled", true) - tymeJV

3 Answers

3
votes

Your javascript code should be 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#postme').attr("disabled","disabled");

$('#checky').click(function(){

    if($(this).attr('checked') == true){
         $('#postme').removeAttr('disabled');
    }
    else {
        $('#postme').attr("disabled","disabled");   

    }
});
});//]]>  

</script>


</head>
<body>
  <input type="checkbox"  id="checky"><a href="#">terms and conditions</a>
<input type="submit" id="postme" value="submit">

</body>


</html>

This snippet is working fine for me.

Update

Use this as click event handler of the checkbox

$('#checky').click(function(){

    if($(this).prop('checked')){
         $('#postme').removeAttr('disabled');
    }
    else {
        $('#postme').attr("disabled","disabled");   

    }
});
0
votes

JSFiddle is a lovely resource. One of the lovely things it does is provide the wrapper for JQuery for you!

Have a little read of this:

Launching Code on Document Ready

To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:

window.onload = function() {
    alert( "welcome" );     
}

Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {
    // Your code here.     
});
0
votes

Make sure your include your <script> after the rest of your html. Or you can wrap it in:

$(document).ready(function() {
    // your code here
});

Also you should use .change instead of .click, in case the user uses the keyboard to check the checkbox.