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

Toggle Classes Or Attributes Based On User Input - input-toggle
File Size: 8.65 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.