disabled buttons with icons

[sandeepmovva]

Disabled buttons with icons act weirdly in that clicking on the button doesn't do anything but clicking on the icon within the disabled button triggers the click event on the disabled button.

In this example, clicking around the envelope but within the button does nothing, as expected.
But, clicking on the envelope triggers the click event.

http://jsfiddle.net/blissfulignant/Rypse/5/

[sandeepmovva]

I guess this is specific to my implementation as I inject elements dynamically.

Seems like the only way around it is to prevent propagation manually ala $(':disabled i').on('click', false);

[shorrockin]

Can you explain why you think this is specific to your implementation? I'm experiencing the same thing and your fiddle example seems to indicate it doesn't have anything to do with dynamic element injection?

[sandeepmovva]

I realized that this is not specific to my implementation and am including that code snippet above to fix that in my app.

[c4urself]

This should be reopened I'm having the same issue -- no dynamic injection at all. When clicking on an icon that is in a disabled button the click event goes through.

[sandeepmovva]

Adding the code snippet above is the solution.

They've made it pretty clear that the disabled class is just for aesthetics and it's up to you to handle clicks. (Source: http://twitter.github.com/bootstrap/base-css.html#buttons)

[c4urself]

There's:

class="disabled"
and
disabled="disabled"

I agree the prior would be an aesthetic thing but the latter should function like any disabled button should, and not be clickable. Placing icons within the button breaks this.

[chadwilcomb]

The jQuery solution above won't work if View is created/rendered after page load, but you can add this to your view:
events: { button:disabled i": "disableClick" }
disableClick: function (e) { e.stopPropagation(); }