6.4. Disable

Toggles the disabled property on DOM elements.

JavaScript Required

Script `disable.js` must be included.

Usage

Data-API

To use an element as control element for toggling disable status on other elements, it must possess the data-toggle="disable" attribute. It also must define the data-disable-target attribute that holds a string which, when evaluated as a jQuery selector, returns a jQuery object referencing the elements that are to be disabled or enabled.

By default the control element triggers the disable() method on the JS event change. This can be changed by specifying the data-disable-event attribute on the control element (i.e. data-disable-event="click").

JavaScript

Methods
$().toggle()

Toggles between enabled and disabled states.

Events
Event Type Description
toggle.bui.disable Fired as soon as the disable function is called.
toggled.bui.disable Fired when the disable function is finished.

Example

Delivery Address
<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-toggle="disable" data-disable-target=".js-delivery" />
            Deliver to different address
        </label>
    </div>
    <fieldset>
        <legend>Delivery Address</legend>
        <div class="form-group">
            <label for="delivery_name">Name</label>
            <input type="text" id="delivery_name" name="delivery[name]" class="form-control js-delivery" disabled />
        </div>
        <div class="form-group">
            <label for="delivery_address">Address</label>
            <input type="text" id="delivery_address" name="delivery[address]" class="form-control js-delivery" disabled />
        </div>
        <div class="form-group">
            <label for="delivery_city">City</label>
            <input type="text" id="delivery_city" name="delivery[city]" class="form-control js-delivery" disabled />
        </div>
    </fieldset>
</form>