(jquery) enabling a submit button when OPTION value selected

Question

Hi!

So I want to enable a submit button whenever an option in my select box (#purchase) is selected (so long as the selection is not the default value.

Here is the jquery code I put together, which is apparently not very good. :)

    $(document).ready(function(){
     $('input[type=\"submit\"]').attr('disabled','disabled');
                 $('#purchase').change(function(){

                         $('input[type=\"submit\"]').attr('disabled', 'enabled');

                 });
             });  

Here is my simple little form...

    <input type='submit' id='submit' value='Purchase'>                         
    <select name='purchase' id='purchase'>  
    <OPTION value='default' DEFAULT>default</OPTION>                                                 
    <OPTION value='small'>11 x 14" Print - $17.00</OPTION>
    <OPTION value='big'>20 x 30" Print - $40.00</OPTION>
    </select> 

Can anybody give me a push in the right direction? :)

Thanks!

Answer 1

To disable you can use

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

and for enabling

$('#submit').removeAttr('disabled');

Answer 2

$(document).ready(function(){
     $('input[type=\"submit\"]').attr('disabled','disabled');
                 $('#purchase').change(function(){
                      if($('#purchase').val() != 'default') {
                         $('input[type=\"submit\"]').removeAttr('disabled');
                      }

                 });
             });

Although, you could probably split the method out into it's own function, and set the button disabled from the start without using document ready.

$(document).ready(function(){ $('#purchase').bind('change', 'EnableSubmit'); });

function EnableSubmit() {
    if($('#purchase').val() != 'default') {
        $('input[type=submit]').removeAttr('disabled');
    }
}