W016

W016

Using the .disabled class on a <button> or <input> only changes the appearance of the element. It doesn't prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the disabled attribute instead.

Per the HTML specification, adding a disabled attribute to a <button> or <input> element prevents that element from receiving interaction events (such as clicks or hovers). Example:

<button type="button" disabled onclick="alert('This JS will never get triggered');">
  This button is unclickable since it's disabled
</button>

Clicking on that button won't cause an alert dialog to be displayed.

Bootstrap styles disabled buttons differently than enabled buttons, by "graying them out", so as to visually indicate their disabled status.

Bootstrap also includes a .disabled CSS class (as opposed to HTML attribute) which merely applies the "grayed out" styling but does not affect the clickability of the button. Example:

<button type="button" class="disabled" onclick="alert('This JS can get triggered');">
  Clicking this button will show an alert dialog
</button>

Clicking on that button will indeed cause an alert dialog to be displayed, even though its visual styling suggests that it's disabled.

There are legitimate cases where you might need to use the .disabled CSS class instead of the HTML disabled attribute. For example, you might want to add a hover-triggered tooltip to a button explaining why its action is currently unavailable/inapplicable and what action(s) would re-enable it. You could do this by applying the .disabled class to the button, applying a tooltip to the button like you would any other normal element, and adding a check in the button's click event handler to ignore click events when the .disabled class is present.

However, it's easy to accidentally use the .disabled class incorrectly in cases where the disabled attribute would be more appropriate, hence why this lint check exists. If you understand the difference between the class and the attribute, and are using the class intentionally and appropriately, then you can safely ignore this warning. (This lint check is a warning rather than an error precisely because human judgment is required to definitively determine whether .disabled is being used correctly.)

Note concerning Bootlint versions prior to 1.0 targeting Bootstrap v3

There is some additional confusion because, depending on your exact version of Bootstrap v3, .btn.disabled might apply a not-yet-standardized pointer-events: none; style to the button. This style, which is only supported in some newer browsers, has the effect of preventing the button from receiving events from pointer devices, thus crudely approximating the effect of the disabled attribute. However, as noted in Bootstrap v3's documentation, this should not be relied upon because (a) it's not supported by all the browsers which Bootstrap v3 supports, and (b) it doesn't prevent users from "clicking" the button by (among other methods) pressing Enter after focusing the button by Tab-ing to it.