-1

Basically, I have a checkbox.
If the checkbox is selected, the drop-down should appear. if unselected the drop down should not show up. Unfortunately, it's not working. This is my code below. It's not the full code but it's enough to see what's wrong. 

<script>
$('[name="Lab Elective"]').on('change', function() {
  $('#Lab Elective g').toggle(this.checked);
}).change();
</script>

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab Elective g" name="Lab Elective g">
<option value="some value">some value</option>
</select>
Mateus
  • 3,595
  • 4
  • 21
  • 32
James
  • 3
  • 1

3 Answers3

1

IDs can't have spaces in them. Change the spaces in your IDs to something else such as -.

https://jsbin.com/famaqovumo/edit?html,css,js,console,output

HTML

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab-Elective-g" name="Lab Elective g">
<option value="some value">some value</option>
</select>

CSS

.hidden {
     display:none;
}

JS

$('[name="Lab Elective"]').on('change', function() {
  $('#Lab-Elective-g').toggleClass('hidden',!$(this).is(':checked'));
}).change();
bassxzero
  • 4,164
  • 18
  • 29
  • 1
    i don't want to remove the spaces since my code is setup with these spaces. Id have to do a lot of changes. Any other way to make it work? – James Dec 13 '17 at 17:04
  • 2
    @James https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html spaces are not valid in IDs based on the HTML spec. You will probably run into other problems if you aren't writing valid HTML. I suggest you cut your losses and make the change now. For that reason, I'm not going to provide a workaround. – bassxzero Dec 13 '17 at 17:06
  • Definitely worth considering refactoring your code to be standards compliant, _without spaces in IDs_. – Tony Chiboucas Dec 13 '17 at 17:25
  • @bassxzero, did you just downvote me out of spite!? Wow. – Tony Chiboucas Dec 13 '17 at 17:26
  • 1
    @TonyChiboucas you could call it that. Honestly I don't care that much, but showing him a workaround is probably going to cause more questions in the future. Also, using `hide` and `show` is magic and i don't recommend using it. – bassxzero Dec 13 '17 at 17:27
0
<script>
function show_hide_sel()
{
   if( $('input[name="Lab Elective"]').is(':checked') )
   {
     $('#Lab_Elective_g').show();
   }
   else
   {
     $('#Lab_Elective_g').hide();
   }
}


$(document).ready(function() {

  $('input[name="Lab Elective"]').on('click', function() {
    show_hide_sel();
  });

  show_hide_sel();
});
</script>

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab_Elective_g" name="Lab Elective g">
<option value="some value">some value</option>

Alexey Yakovlev
  • 83
  • 5
-2

Avoid the use of jQuery.toggle, and be careful with the ID.

IDs containing spaces are trickier to select with jQuery.

$(document).ready(function(){
  $('[name="Lab Elective"]').on('change', function() {
    if (this.checked) {
      $("[id='Lab Elective g']").show();
    } else {
      $("[id='Lab Elective g']").hide();
    }
  });
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value" checked>

<select id="Lab Elective g" name="Lab Elective g">
    <option value="some value">some value</option>
</select>

For this to default to unchecked and hidden, make the following adjustments:

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab Elective g" name="Lab Elective g" style="display:none;">
Tony Chiboucas
  • 4,835
  • 24
  • 35