1

I have the following simple bootstrap (3) button, as part of a form:

<button type="button" class="btn btn-success">Click</button>

In the same form, I have jQuery (1.8.2) Ajax action going off upon a blur event of a text box element. According to the response from this action, I disable this button.

At first, it appears that the button is indeed disabled, but as soon as I click ANYWHERE on the page, the button gets re-enabled by itself. I should mention that I have no code that does that, so that's nothing running from my piece of code.

I've tried these ways to disable the button, as described here:

.attr("disabled", "disabled")

.prop("disabled", true)

.addClass("disabled")

.removeClass("btn-success").addClass("btn-disabled")

All of these get the button to be disabled, but none of them stick when I click somewhere, as I've mentioned above. When I'm talking about re-enabled, I mean that according to the method I used to disable it, the opposite action occurs. For example, if I added the attribute "disabled" to the button element, it gets deleted from the element. If I switch between the classes of the button ("btn-success" -> "btn-disabled"), they get switched back. It's like some kind of a virtual Voodoo magic... :( :)

I should also mention that this situation occurs only when the disabling action is running from the embedded code of the website. When I run this specific code in the browser's console, the button stays disabled, like it should.

Further more, I have more buttons like that in the same form and one of them is also disabled, but on HTML level, not by code. There is nothing wrong with this button and it's acting like expected.

What am I missing here??...

TheCuBeMan
  • 1,954
  • 4
  • 23
  • 35

2 Answers2

0

A very simple way to disable any html element i.e. button, textbox, div etc.

Just add two Css properties on the element which you want to disable

opacity:0.4;
pointer-events:none;

Here is the fiddle for that http://jsfiddle.net/qn6k5qoz/

Hope this works Well for you..

Community
  • 1
  • 1
deepanshu
  • 34
  • 5
  • You may be right that these 2 CSS definitions make any element act as disabled (and I guess that's what bootstrap is doing), but the solution I found (as described here) is an extension of jQuery, which is much more easier to implement and use. Thanks a lot anyway!! – TheCuBeMan Aug 31 '14 at 05:26
0

Actually, I managed to solve my problem, using the code from this issue:

What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

For some reason, only when I disable the button using the "extend" code shown in this article, the disabling sticks and doesn't change weirdly.

Well, because I don't care about weird, only about solving the problems and moving forward, I'm good with this solution... and moving forward...

Happy coding!

Community
  • 1
  • 1
TheCuBeMan
  • 1,954
  • 4
  • 23
  • 35