禁用复选框上的文本区域：使用 bootstrap-switch 检查

Question

我有一个 MVC 应用程序，其中有一个 class 布尔值。如果项目被指示为已拒绝 (returns false)，则每个开关旁边都有一个文本区域用于输入评论。如果开关设置为已接受（returns 真），我需要禁用文本区域。我已经进行了令人作呕的搜索，但找不到合适的解决方案。我知道 bootstrap-switch 内置了一个 on-change 事件处理程序，但我正在努力避免为每个 bool 字段使用单独的行而不是使用 (this).

代码示例如下：

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

这是脚本：

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

我正在使用 FoolProof，如果值为 false，则需要填写文本区域字段。

Answer 1

没有看到渲染图HTML，有点难帮忙。我已经重新创建了您的代码 in this demo bootply。这是我用来初始化复选框和处理文本区域切换的代码：

$(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();
    }
  });
});

为此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>

查看链接的 bootply 以查看它是否正常工作。

注意：对于您的代码，进行此更改可能使其生效：

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

函数 $.toggle() 不接受选择器参数。参见 the docs here。

禁用复选框上的文本区域：使用 bootstrap-switch 检查

Disable textarea on checkbox :checked with bootstrap-switch

jquery

bootstrap-switch