There is a newer version of Luda.

Let's go!

Disabled

Prevent form elements from responding to user actions and being submitted.

Introduction

The native disabled attribute can be added to form elements for form control. A disabled element cannot be focused and doesn’t respond to user actions. If a form element is disabled, it will not be submitted.

In Luda, we enhanced the disabled attribute, it can be added to any elements to prevent responding to user actions. Please see the examples below for clarification.

Disabled Buttons

Use the disabled attribute to disable a button.

<button class="btn btn-primary" disabled>A disabled button</button>

Diabled Forms

Use the disabled attribute to disable a form element.

<div class="fm fm-text" disabled>
  <input disabled placeholder="E.g., a disabled text field">
</div>

Other Examples

Use the disabled attribute to disable a link.

A disabled link

<a href="#" disabled>A disabled link</a>

Dynamic Control

In Luda, we use the [disabled] selector to detect disabled elements. If you want to remove the disabled state dynamically in Javascript, just remove the disabled attribute.

luda('#my-disabled-element').removeAttr('disabled')

Sass Variables

$opacity-disabled: $opacity-muted !default