Sine Burridge Sine Burridge - 1 month ago 11
jQuery Question

Disabled input until check box is selected

I've got a form input with a prepended check box and I want this input to be disabled until the checkbox is selected. How would I go about doing this?

This is my input:

<div class="form-group ">
<label class="control-label" for="date">Student</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input id="prependedcheckbox" name="prependedcheckbox" class="form-control"
type="text" placeholder="">
</div>
</div


This is an example of the disabled state I'm talking about.

Answer

Here is how you do it with JQuery(Remember to add an id to the checkbox):

$(function() {
  $inp = $("#prependedcheckbox");
  $cb = $("#checkbox");
  $inp.prop('disabled', true);

  $cb.on('change', function() {
    if ($cb.is(':checked')) {
      $inp.prop('disabled', false);
    } else {
      $inp.prop('disabled', true);
    }
  });

});

JSFiddle