Disable Enable Button Using Jquery

I have a working javascript version to disable/enable a from button but I can not get it working using jQuery. My jsfiddle has both versions. The javascript version is commented ou

Solution 1:

This might not solve your problem, however you are using the removeProp method wrong. According to the jQuery documentation, removeProp takes only one attribute

.removeProp( propertyName )
propertyName
Type:String
The name of the propertyto remove.

In your example, I would change your lines that look like this

$('#button_start').click(function(){
    $(this).removeProp('disabled', 'disabled');
});

to this

$('#button_start').click(function(){
    $(this).removeProp('disabled');
});

https://api.jquery.com/removeProp/

Also, remember that id elements must start with the # sign. You had that in your OP but not in the fiddle.

Solution 2:

Your selectors are wrong.

$('button_start')

should be

$('#button_start') 
   ^--------------- Missing id selector syntax

Then you need to include the jQuery library for the fiddle to start working.

Solution 3:

Add the style:

#button_start:disabled{background:blue;opacity:0.3;}

and your script:

functioncontrols(id) {

    if (id === "button_start") {
        $('#button_start').attr('disabled','disabled');      
        $('#button_stop').removeProp('disabled');
    } else {
        $('#button_stop').attr('disabled','disabled');
        $('#button_start').removeProp('disabled');
    }
}

Solution 4:

For jQuery versions after 1.6:

$('#button_start').prop('disabled', false); //to enable and pass true to disable

For other options and versions, look at this SO answer Disabling and enabling an HTML input button