Jquery to disable a HTML button not working

Question

I am trying to get some jQuery to disable the confirm button on my form if the dropdown list is a certain value, but it doesnt seem to be working.

I have read lots of posts on here and tried various different ways.

Here is my code at the moment:

    <script>
       $(document).ready(function () {
       // Handler for .ready() called.
       $('#MoveToCompanyId').attr("disabled", true);

       $('#DeleteAll').live("click", function () {

           if ($(this).attr("value") == "True") {
                 $('#MoveToCompanyId').attr("disabled", true);
           } else {
                 $('#MoveToCompanyId').attr("disabled", false);
                 $('#confirm').attr("disabled", true);
                 $('#MoveToCompanyId').change(function () {
                     if ($("#MoveToCompanyId option:selected").text() != "---Select Company---") {
                    $('#confirm').removeAttr("disabled");
                    alert($("#MoveToCompanyId option:selected").text());
                }
                else {
                    $('#confirm').attr("disabled", true);
                    alert("I should be disabled!");
                }

            });
        }
        });
     });

    </script>

Can anyone see any problems with it?

Just to clarify, i know it gets into the correct code blocks as my alerts are working. Its just the button disabling that is not working.

Kind Regards,

Gareth

Unfortunately this didnt work either. I am looking at the button in Firebug and it never seems to add the disabled attribute at all. — Gaz Winter, Jun 14 '12 at 13:28
@BehnamEsmaili not easily as its calling loads of clever functions from MVC framework. — Gaz Winter, Jun 14 '12 at 13:32
@GazWinter have you checked for other attribute ? (e.g: .attr("someproperty","somevalue")). — Behnam Esmaili, Jun 14 '12 at 13:35
@GazWinter can you post a section of the html that goes with the function? — Dave, Jun 14 '12 at 13:44
Thanks but i got it working now using the method @FelixKling suggested. — Gaz Winter, Jun 14 '12 at 13:50

score 10 · Accepted Answer · edited Aug 24 '16 at 06:55

10

You should be using

prop('disabled',true)
prop('disabled',false)

if you are using jQuery 1.6+ then you should be using prop.

Read more about prop

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.

edited Aug 24 '16 at 06:55

Tony

5,972
2
39
58

answered Jun 14 '12 at 13:33

wirey00

33,517
7
54
65

thanks for that advice wirey, sadly this doesnt seem to work either. – Gaz Winter Jun 14 '12 at 13:42
@janex Do you have an example of what you're trying to do? – wirey00 Jun 21 '13 at 13:47
Disregard my comment, it put the disabled prop in the button just fine, but my button is still clickable. I didn't think I had to check if the disabled prop was on or not on the button before letting the code continue. I thought disabled actually disabled all events for that button. My bad. Thanks for the help! – janex Jun 21 '13 at 16:49
@janex are you using jQuery UI buttons? If so that's a different story, but with regular buttons it should prevent clicks if they are disabled – wirey00 Jun 21 '13 at 16:51
no i'm using regular buttons but with custom css, but i'm listening to the touchstart event not click event, since its for a phonegap app @ᾠῗᵲᄐᶌ, i see the disabled added to the button but touch events are still happening. – janex Jun 21 '13 at 23:46
@janex not sure if you are using jQM also.. if you are this will probably help out http://stackoverflow.com/a/5875143/1385672 . If it doesn't, if you could create a fiddle I could help you try and figure it out – wirey00 Jun 24 '13 at 13:02

score 3 · Answer 2 · answered Jun 14 '12 at 13:22

3

You should be using

.attr('disabled', 'disabled')

to disable a control and

.removeAttr('disabled')

to enable it.

http://www.w3schools.com/tags/att_input_disabled.asp

answered Jun 14 '12 at 13:22

Dave

3,581
1
22
25

Thanks Dave, this is one of the things i already tried to no avail! – Gaz Winter Jun 14 '12 at 13:25
@BehnamEsmaili specifying an arbitrary value for 'disabled' will disable a control but the only way to re-enable it is to remove the 'disabled' attribute altogether – Dave Jun 14 '12 at 13:44
what is your problem with removing it then? – Behnam Esmaili Jun 14 '12 at 13:45
Thanks for all your help guys, i got it working using the .prop way. – Gaz Winter Jun 14 '12 at 13:49
@BehnamEsmaili no problem at all; the point is that if you leave the 'disabled' attribute on a control it should always be disabled (though some browsers maybe behave differently) as 'disabled', like 'checked', 'selected' and 'nowrap' are boolean attributes; their value doesn't matter except for XML conformance – Dave Jun 14 '12 at 13:50

score 0 · Answer 3 · answered Jun 14 '12 at 13:24

0

Try

 attr('disabled', 'disabled')

instead of

attr("disabled", true);

answered Jun 14 '12 at 13:24

TRR

1,637
2
26
43

Jquery to disable a HTML button not working

3 Answers3