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
<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>