Disable textarea on checkbox :checked with bootstrap-switch

Question

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).

Here is an example of the code:

<div class="form-group">@Html.LabelFor(model => model.TaxTranscript, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-1">
        <div class="checkbox">@Html.EditorFor(model => model.TaxTranscript) @Html.ValidationMessageFor(model => model.TaxTranscript, "", new {@class = "text-danger"})</div>
    </div>
    <div class="comments">@Html.Label("Comments", htmlAttributes: new { @class = "control-label col-md-1" })
        <div class="col-md-4">@Html.EditorFor(model => model.TranscriptComments, new { htmlAttributes = new { @class = "form-control", @rows = 4 } }) @Html.ValidationMessageFor(model => model.TranscriptComments, "", new { @class = "text-danger" })</div>
    </div>
</div>
<div class="form-group">@Html.LabelFor(model => model.AIR, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-1">
        <div class="checkbox">@Html.EditorFor(model => model.AIR) @Html.ValidationMessageFor(model => model.AIR, "", new { @class = "text-danger" })</div>
    </div>@Html.Label("Comments", htmlAttributes: new { @class = "control-label col-md-1" })
    <div class="col-md-4 comments">@Html.EditorFor(model => model.AIRComments, new { htmlAttributes = new { @class = "form-control", @rows = 4 } }) @Html.ValidationMessageFor(model => model.AIRComments, "", new { @class = "text-danger" })</div>
</div>

And here is the script:

<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script>
    $(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');
        });
    });
</script>

I am using FoolProof requiring the textarea field be filled if the value is false.

Answer 1

Without seeing the rendered HTML, it is a little difficult to help. I have recreated your code in this demo bootply. Here's the code I used to init your checkboxes and handle the textarea toggling:

$(function () {
  $('input[type="checkbox"]').bootstrapSwitch({
    state:false,
    size: 'mini',
    onColor: 'success',
    onText: 'Accepted',
    offColor: 'danger',
    offText: 'Rejected',
    onSwitchChange:function(e){
      $(e.target).closest('.form-group').find('textarea').toggle();
    }
  });
});

For this HTML:

<div class="form-group">
  <label class="control-label col-md-2">CB</label>
  <div class="col-md-1">
    <div class="checkbox">
      <input type="checkbox">
    </div>
  </div>
  <div class="comments">
    <label class="control-label col-md-2">Comments</label>
    <div class="col-md-4">
      <textarea class="form-control" rows="4"></textarea>
    </div>
  </div>
</div>

Check out the linked bootply to see it work.

Note: For your code, making this change may possibly make it work:

$('input[name="TaxTranscript"]').on('switchChange.bootstrapSwitch', function (event, state) {
    $(this).closest('form-group').find('textarea').toggle();
});

The function $.toggle() doesn't take a selector argument. See the docs here.