jQuery

【jQuery】フォームフィールドを無効/有効にするロジックを追加jQuery Toggle fields

November 22, 2017
jQuery Toggle fields

jQuery Toggle fieldsは、フォームフィールドを無効または有効にするロジックを追加するプラグイン。

Usage

スクリプトを含める

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="jquery.toggleFields.js"></script>

Attribute

  1. data-toggle-conditions
  2. data-toggle-target
  3. data-toggle-next
  4. data-toggle-ref
  5. data-toggle-recursive

data-toggle-conditions

<div data-toggle-conditions="#field-1-with-condition, #field-2-with-condition">

data-toggle-target

<label data-toggle-target for="field-1-with-condition-example"> Label for a form field </label>
<input data-toggle-target id="field-1-with-condition-example"/>

data-toggle-next & data-toggle-ref

<div data-toggle-next data-toggle-ref="field-1-with-condition"> The wrapping element of the targets </div>

data-toggle-recursive

<div data-toggle-next data-toggle-ref="field-2-with-condition" data-toggle-recursive> The wrapping element of the targets </div>

Init

  $('form').toggleFields();

Init with options

    var options = {
        conditionIdentifier: 'data-toggle-condition',
        conditionsIdentifier: 'data-toggle-conditions',
        disabledClass: 'disabled',
        disabledAttr: 'disabled',
        helpTextIdentifier: 'form-row__instructions',
        nextFormRowsIdentifier: 'data-toggle-next',
        nextRowReferenceIdentifier: 'data-toggle-ref',
        targetIdentifier: 'data-toggle-target',
        toggleClass: 'js-toggleFields--on'
        initCallback: function initCallback() {},
        toggleOnCallback: function toggleOnCallback() {},
        toggleOffCallback: function toggleOffCallback() {}
    };

    $('form').toggleFields(options);

MIT