Toggle Classes Or Attributes Based On User Input - input-toggle

input-toggle is a jQuery plugin that makes it possible to toggle classes or attributes of HTML elements based on based on the state of form fields.

With this plugin, you're able to enable/disable or display/hidden specific elements conditionally based on user input.

How to use it:

1. To get started, you need to load the JavaScript file input-toggle.js after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="input-toggle.js"></script>

2. Initialize the plugin and we're ready to go.

InputToggle.init();

3. The example to toggle the CSS class of an element based on the value of your checkbox.

• data-input-toggle: toggle element
• data-input-toggle-active-value: active value(s)
• data-input-toggle-inactive-class: inactive class(es)

<input type="checkbox" name="toggle-example" value="1">

<div data-input-toggle="toggle-example"
     data-input-toggle-active-value='["1"]'
     data-input-toggle-inactive-class="hide">
     Content visibility toggled with a class
</div>

4. The example to toggle the attribute of an element based on the value of your checkbox.

• data-input-toggle: toggle element
• data-input-toggle-active-value: active value(s)
• data-input-toggle-inactive-attribute: inactive attribute

<input type="checkbox" name="toggle-example" value="1">

<select name="select-example"
        data-input-toggle="the_checkbox"
        data-input-toggle-active-value="1"
        data-input-toggle-inactive-attribute="disabled=disabled">
        <option>Select disabled unless first option checked</option>
        <option>disabled attribute gets toggled</option>
</select>

Changelog:

2018-08-28

• Fix object variable declaration, clean up some unneeded code.

---

This awesome jQuery plugin is developed by tompenzer. For more Advanced Usages, please check the demo page or visit the official website.