How do i disable a submit button when checkbox is uncheck?

Question

I have something here that cannot seem to help me disable the submit button. any ideas?

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

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

JohnP · Accepted Answer · 2011-03-29T04:31:46.137

13

You should be checking for the attribute checked and not the method.

Updated fiddle : http://jsfiddle.net/8YBu5/7/

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

EDIT

Remember that this code needs to be wrapped inside $(document).ready() or put at the bottom of your html code, otherwise your JS will bind itself to DOM elements that have not been loaded yet and will fail.

Wrapping it in .ready()

<script type='text/javascript'>
$(document).ready(function(){
    $('#checky').click(function(){
        if($(this).attr('checked') == false){
             $('#postme').attr("disabled","disabled");   
        } else {
            $('#postme').removeAttr('disabled');
        }
    });
});
</script>

This code can be put anywhere in the document and will only trigger once the DOM is ready so you don't have to worry about premature triggers.

Putting it at the bottom of your document

<!-- some HTML -->
<script type='text/javascript'>
        $('#checky').click(function(){
            if($(this).attr('checked') == false){
                 $('#postme').attr("disabled","disabled");   
            } else {
                $('#postme').removeAttr('disabled');
            }
        });
</script>
</body>
</html>

If you're putting it at the bottom of your document, you don't need to wrap it in .ready() because the javascript will not be read until everything else has loaded. There is a performance boost in this method (if you have a lot of JS)

You can use either one of these methods to make sure that your JS binds event handling methods to DOM elements only after they have finished loading.

edited Mar 29 '11 at 04:31

answered Mar 28 '11 at 11:53

JohnP

49,507
13
108
140

+1 though he wasn't checking for the method, he was checking the property on the collection. – Aistina Mar 28 '11 at 11:56
@john it works perfectly on the jsfiddle, however on my ide the script doesnt even run. i have placed alert test after the click function but it does not even trigger. is there a reason why? – pivotal developer Mar 28 '11 at 16:12
if you're using firefox, hit CTRL + SHIFT + J and look at the errors tab to check what errors are present. Also make, sure you included jquery and make sure this method is wrapped inside `$(document).ready(function(){})` – JohnP Mar 28 '11 at 16:15
@john it has to be within $(document).ready(function(){}? can't i just put it in the normal tag? – pivotal developer Mar 29 '11 at 01:55
1

if you do that, then you have to put it at the bottom. Editing my question to show you how – JohnP Mar 29 '11 at 04:25
@john awesome, finally got it to work from your example..thanks – pivotal developer Mar 29 '11 at 06:21
1

As of jQuery 1.6, you should use `prop` instead of `attr`, see my answer below. Also golfs better. – Ciro Santilli OurBigBook.com Jul 06 '14 at 11:21
i like your method, but it still have problems with IE7 and IE8 compatibility. I tried the below code too: " " Use this: http://jsfiddle.net/8YBu5/7/ My default, the user has to check the box to enable the submit button to move forward. – raja777m Dec 17 '14 at 00:11
If you want the default to be unchecked, this does not work. – User Jun 24 '15 at 02:33

score 5 · Answer 2 · answered Mar 28 '11 at 11:54

5

if(!$(this).is(':checked') ...

answered Mar 28 '11 at 11:54

manji

47,442
5
96
103

I'd personally recommend this over the `.attr('checked') == false` method. Much more readable and beautiful. – sharat87 Mar 28 '11 at 12:32

score 4 · Answer 3 · edited May 23 '17 at 12:13

4

Before jQuery 1.6 attr was OK, after 1.6 you must use prop.

$('#checky').click(function(){
  $('#postme').prop('checked', !$(this).checked);
})

Attributes and properties are different things, but unfortunately jQuery took a long time to differentiate between them.

See also: .prop() vs .attr()

edited May 23 '17 at 12:13

Community

1
1

answered Jul 06 '14 at 11:20

Ciro Santilli OurBigBook.com

347,512
102
1,199
985

score 2 · Answer 4 · answered Mar 28 '11 at 11:53

2

change $(this).checked to if($(this).attr('checked') == false){

Here you go.

answered Mar 28 '11 at 11:53

S L

14,262
17
77
116

score 1 · Answer 5 · answered Oct 04 '16 at 10:30

Try this

$(document).ready(function(){
                $("#postme").attr("disabled","disabled");
                    $("#checky").click(function(){
                        if($("#checky").is(":checked")){
                         $("#postme").removeAttr("disabled");   
                         }
                        else{
                            $("#postme").attr("disabled","disabled");
                            }
                    });
                })

score 1 · Answer 6 · answered Mar 28 '11 at 12:03

1

Try this way

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

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

answered Mar 28 '11 at 12:03

Shaitender Singh

2,157
5
22
35

score -1 · Answer 7 · answered Mar 28 '11 at 11:53

-1

Add to the button #postme a click event that checks if the check box is checked. If it is checked, return false, otherwise return true.

$('#postme').click( function () {
    if ( !$('#checky').attr('checked') ) {
        return false;
    }
});

answered Mar 28 '11 at 11:53

Andrew Jackman

13,781
7
35
44

He wants the button disabled - this still allows the user to click on the button. – patmortech Mar 28 '11 at 11:58

How do i disable a submit button when checkbox is uncheck?

7 Answers7

Linked

Related