Show select box only when checkbox is checked

2 Views

I use this code in order to show/hide select box depends if a checkbox is checked or not: 

jQuery(document).ready(function($){
    $('[type="checkbox"][name="fields[special_proj_checkbox_field][]"]').change(function(){
      $('select.select').toggle(this.checked);
    });
});

This code is executed in the back-end, in the edit post screen.
It works well except for one thing — the first time I get to the edit post screen, the checkbox isn’t checked, but the select box is visible, only after I check the checkbox and unchecked it again, the box is hiding.

Read More

How can I make it hidden by default?

Post Views: 2

Related posts

2 comments

  1. You can initially hide the select

    jQuery(document).ready(function($){
   var select = $('select.select').hide();
   //or select = $('select.select').toggle();
    $('[type="checkbox"][name="fields[special_proj_checkbox_field][]"]').change(function(){
      select.toggle(this.checked);
    });
});

  2. As far as I know jQuerys .hide() function is triggering display:none. So you may initially add display:none to your box or add a $.hide() at the very beginning of your code.

Comments are closed.