disable enable button using jquery

Question

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 out.

    //NOT WORKING jQuery
   function controls(id) {
   if (id === "button_start") {
    //$('button_start').prop('disabled','disabled');
    // $('button_stop').removeProp('disabled','disabled');

    // testing
    $('#button_start').on('click',function() {
        $(this).prop('disabled', 'disabled');
    });
    $('#button_stop').on('click', function(){
        $(this).removeProp('disabled', 'disabled');
    });

    //console.log(id);

   } else {
    //$('button_stop').prop('disabled','disabled');
    //$('button_start').removeProp('disabled','disabled');

     // testing
    $('#button_stop').click(function() {
        $(this).prop('disabled', 'disabled');
    });
    $('#button_start').click(function(){
        $(this).removeProp('disabled', 'disabled');
    });
      //console.log(id);
        }
    }

jsFiddle: https://jsfiddle.net/tommy6s/w2u8eskv/

Thank you for your help!

The disabled property is a boolean. Set it to true or false, don't set it to a string or try to remove it. — nnnnnn
– nnnnnn, Commented Feb 5, 2016 at 0:24
This question would be easier to understand if you copied the working JavaScript from the fiddle to the question. — Perry
– Perry, Commented Feb 5, 2016 at 0:48

Richard Hamilton · Accepted Answer · 2016-02-05 00:19:50Z

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 property to 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.

answered Feb 5, 2016 at 0:19

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

Comments

Sushanth -- · Accepted Answer · 2016-02-05 00:21:03Z

0

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.

answered Feb 5, 2016 at 0:21

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

dexhering · Accepted Answer · 2016-02-05 00:27:56Z

0

Add the style:

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

and your script:

function controls(id) {

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

answered Feb 5, 2016 at 0:27

dexhering

4224 silver badges13 bronze badges

Comments

Brandon Minnick · Accepted Answer · 2018-04-27 17:19:47Z

0

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

edited Apr 27, 2018 at 17:19

Brandon Minnick

15.7k16 gold badges83 silver badges147 bronze badges

answered Apr 27, 2018 at 17:00

Josh

4557 silver badges15 bronze badges

Collectives™ on Stack Overflow

disable enable button using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related