18 April 2016

Snippet shows how to toggle input text using checkbox. Sometimes you need to show text field only when a checkbox is checked, that can be called conditional text field. So you need a checkbox and a textarea, also some JavaScript. Using display none on your text input you have the box disabled in default. You could also make it hidden using javascript, but that might cause some flickering on your site.

Source code viewer
  1. <p>
  2.   <input type="checkbox" id="input-list" name="list" value="1" />
  3.   <label for="input-list">Create a list</label>
  4. </p>
  5. <p><input type="text" name="list-name" value="" style="display:none" /></p>
  6.  
  7. <script type="text/javascript">//<![CDATA[
  8.   (function($){$().ready(function(){
  9.  
  10.     $('#input-list').click(function(){
  11.       $('input[name="list-name"]').toggle();
  12.     });
  13.  
  14.   });})(jQuery);
  15. //]]></script>
Programming Language: jQuery