title: Disable textarea on checkbox :checked with bootstrap-switch
body: <p>I have an MVC app where I have a class of bools.  There is a textarea next to each switch to enter comments if the item is indicated as rejected (returns false).  I need to have the textarea disabled if the the swith is set to Accepted (returns true).  I have searched ad nauseum and can't find a suitable solution.  I know that there is an on-change event handler built in to bootstrap-switch but I am struggling to avoid an indivisual line for each bool field rather than using (this).</p>
  
  <p>Here is an example of the code:</p>
  
  <pre><code>&lt;div class="form-group"&gt;@Html.LabelFor(model =&gt; model.TaxTranscript, htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div class="col-md-1"&gt;
          &lt;div class="checkbox"&gt;@Html.EditorFor(model =&gt; model.TaxTranscript) @Html.ValidationMessageFor(model =&gt; model.TaxTranscript, "", new {@class = "text-danger"})&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="comments"&gt;@Html.Label("Comments", htmlAttributes: new { @class = "control-label col-md-1" })
          &lt;div class="col-md-4"&gt;@Html.EditorFor(model =&gt; model.TranscriptComments, new { htmlAttributes = new { @class = "form-control", @rows = 4 } }) @Html.ValidationMessageFor(model =&gt; model.TranscriptComments, "", new { @class = "text-danger" })&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;@Html.LabelFor(model =&gt; model.AIR, htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div class="col-md-1"&gt;
          &lt;div class="checkbox"&gt;@Html.EditorFor(model =&gt; model.AIR) @Html.ValidationMessageFor(model =&gt; model.AIR, "", new { @class = "text-danger" })&lt;/div&gt;
      &lt;/div&gt;@Html.Label("Comments", htmlAttributes: new { @class = "control-label col-md-1" })
      &lt;div class="col-md-4 comments"&gt;@Html.EditorFor(model =&gt; model.AIRComments, new { htmlAttributes = new { @class = "form-control", @rows = 4 } }) @Html.ValidationMessageFor(model =&gt; model.AIRComments, "", new { @class = "text-danger" })&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the script:</p>
  
  <pre><code>&lt;script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() {
          $('input[type="checkbox"]').bootstrapSwitch('state', false, false);
          $('input[type="checkbox"]').bootstrapSwitch('size', 'mini');
          $('input[type="checkbox"]').bootstrapSwitch('onColor', 'success');
          $('input[type="checkbox"]').bootstrapSwitch('onText', 'Accepted');
          $('input[type="checkbox"]').bootstrapSwitch('offColor', 'danger');
          $('input[type="checkbox"]').bootstrapSwitch('offText', 'Rejected');
  
  
          $('input[name="TaxTranscript"]').on('switchChange.bootstrapSwitch', function(event, state) {
              $(this).toggle('#TranscriptComments textarea');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am using FoolProof requiring the textarea field be filled if the value is false.</p>