Conditionally Toggle Form Controls Based On Values - Conditionize

File Size: 127 KB
Views Total: 1664
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Conditionally Toggle Form Controls Based On Values - Conditionize

Conditionize is a jQuery plugin that toggles the visibility of form controls based on the value(s) of a form field (input, select, checkbox, etc).

How to use it:

1. Download and place the JavaScript file conditionize.min.js after jQuery library.

<script src="" 
<script src="dist/conditionize.min.js"></script>

2. Apply the condition logic to form controls using the data-cond attribute as follows:

<form class="example" action="#">

  <input type="text" name="text-control" placeholder="Type 'jQueryScript'">

  <div data-cond="[name=text-control] == jQueryScript">Text To Show Once You Typed 'jQueryScript'.</div>

  <select name="select-control">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three. Wow, you will see the new control below...</option>

  <div data-cond="[name=select-control] == 3">
      <input type="checkbox" name="checkbox-control">
      Is checked?
        <span data-cond="[name=checkbox-control] != true">Nope</span>
        <span data-cond="[name=checkbox-control]">Yep</span>

  <div data-cond="[name=select-control] == 3 && [name=checkbox-control] == true">
    <a href="" rel="nofollow" target="_blank">GitHub</a>

3. Hide the conditional form fields on page load.

[data-cond] {
  display: none;

4. Call the function on the form and done.




5. Customize the default selector & attribute:

  selector: '[data-cond]',
  conditionAttr: 'data-cond'

6. Specify how often to check the condition logic.

  checkDebounce: 150

7. Customize the toggle function.

  // function( $item, show ) { $item[ show ? 'show' : 'hide' ](); }
  customToggle: null, 

8. Event handlers.

  // function() {}
  onInit: null, 

  // function() {}
  onDestroy: null,

  // function( $item, show ) {} 
  onCheck: null, 


v1.0.5 (2020-05-30)

  • fixed radio button bug

v1.0.4 (2020-01-21)

v1.0.3 (2019-11-22)

  • update

v1.0.2 (2019-11-04)

  • removed rafl usage (causes bugs in Visual Portfolio when no tab active)

v1.0.1 (2018-11-13)

  • fixed usage of global $ variable, use jQuery instead

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