jquery 1.8.2 enable/disable submit button based on checkbox status

Question

I was able to get this working using jquery 1.6, but I upgraded to 1.8 and can't get it to work. Here's the jfiddle: link

and the code:

HTML:

 <form id="ad_form" method="post" action="">
    <input type="checkbox" id="tosId" name="tos_name" style="padding:0; margin:0" ></input>       
    <br />
    <input type="submit" id="submitId" name="submit_name" value="Submit"  /></input>
 </form>

jQuery:

 $('#submitId').attr('disabled', 'disabled');  

 function updateFormEnabled() 
     {
         if($('#tosId').prop('checked'))
         {
             $('#submitId').attr('disabled', '');
         } 
         else 
         {
             $('#submitId').attr('disabled', 'disabled');
         }
     }

 $('#tosId').change(updateFormEnabled);

Try with prop rather than attr. Also i think we can remove disabled attribute if we want to enable, using removeAttr('disabled') instead of setting attr('disabled','') — Murali Murugesan
– Murali Murugesan, Commented Oct 19, 2012 at 13:20

Igor Dymov · Accepted Answer · 2012-10-19 13:23:28Z

3

It's a good idea to use prop method in jQuery 1.8:

function updateFormEnabled() 
{
    var checked = $('#tosId').prop('checked');
    $('#submitId').prop('disabled', !checked);
}

fiddle: http://jsfiddle.net/3aFaA/3/

answered Oct 19, 2012 at 13:23

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wirey00 · Accepted Answer · 2012-10-19 13:28:45Z

3

You should use .prop() to set disabled property

function updateFormEnabled(){         
    $('#submitId').prop('disabled', !$('#tosId').prop('checked'));        
 }

From jQuery docs http://api.jquery.com/prop/

The .prop() method should be used to set disabled and checked instead of the .attr() method.

answered Oct 19, 2012 at 13:28

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Comments

Dipak · Accepted Answer · 2012-10-19 13:20:57Z

1

use removeAttr()

  if($('#tosId').prop('checked'))
     {
         $('#submitId').removeAttr('disabled');
     } 
     else 
     {
         $('#submitId').attr('disabled', 'disabled');
     }

answered Oct 19, 2012 at 13:20

Dipak

12.2k3 gold badges32 silver badges31 bronze badges

1 Comment

Patrick Over a year ago

...you're the man. Thanks. Works perfect. I'll accept your answer "after 10 minutes"

yodog · Accepted Answer · 2012-10-19 13:21:14Z

0

should be $('#submitId').removeAttr('disabled');

instead of $('#submitId').attr('disabled', '');

answered Oct 19, 2012 at 13:21

yodog

6,2834 gold badges28 silver badges52 bronze badges

Comments

Stefan Ladwig · Accepted Answer · 2012-10-19 13:21:42Z

0

$('#submitId').attr('disabled', 'disabled');  

function updateFormEnabled() 
{
    if($('#tosId').prop('checked'))
    {
        $('#submitId').attr('disabled', false);
    } 
    else 
    {
        $('#submitId').attr('disabled', true);
    }
}

$('#tosId').change(updateFormEnabled);

should work jfiddle

answered Oct 19, 2012 at 13:21

Stefan Ladwig

5899 silver badges19 bronze badges

Comments

uzername_not_found · Accepted Answer · 2012-10-19 13:26:08Z

0

$('#submitId').attr('disabled', 'disabled');  

function updateFormEnabled()
    {
        if($('#tosId').prop('checked'))
        {
            $('#submitId').attr('disabled', false);
        }
        else
        {
            $('#submitId').attr('disabled', true);
        }
    }

$('#tosId').change(updateFormEnabled);

answered Oct 19, 2012 at 13:26

uzername_not_found

3391 silver badge5 bronze badges

Collectives™ on Stack Overflow

jquery 1.8.2 enable/disable submit button based on checkbox status

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related