Sandbox: JavaScript

Enables all the form inputs of a form, allowing the user to edit it.


In this example there are two triggers in use. enableForm and addClass; the former enables the specified inputs and the latter hides the related lock icon.

Unlock this form

<form method="get">
    <a class="btn btn-default" data-trigger="enableForm addClass"
        'target': '!form'
        'targets': '!form .unlocks',
        'class': 'hide'
      ">Unlock this form</a>

  <div class="form-group">
    <input type="text" value="" disabled="disabled" class="form-control input-hg">
    <span class="input-icon fui-lock unlocks"></span>

  <div class="form-group">
    <input type="text" value="I don't unlock" disabled="disabled" class="form-control input-hg" data-remain-locked="true">
    <span class="input-icon fui-lock"></span>

  <div class="form-group">
    <select class="form-control" disabled="disabled">
    <span class="input-icon fui-lock unlocks"></span>


Behavior Options

These options apply only to the data- tag invocation.

Name type default description
target string ~ The selector to the form to enable.
inputSelector string 'input:not([data-remain-locked],
The inputs to enable. By default, any input, select, or textarea that has a value for data-remain-locked will remain locked.