0

我有一个 MVC 应用程序，其中有一类布尔值。如果项目被指示为拒绝（返回 false），则每个开关旁边都有一个文本区域用于输入评论。如果 swith 设置为 Accepted（返回 true），我需要禁用 textarea。我搜索了 ad nauseum 并找不到合适的解决方案。我知道 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，则需要填写 textarea 字段。

4

1 回答 1

2

没有看到呈现的 HTML，有点难以提供帮助。我在这个演示 bootply 中重新创建了您的代码。这是我用来初始化复选框和处理 textarea 切换的代码：

$(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()不采用选择器参数。请参阅此处的文档。

于 2015-06-16T17:18:27.197 回答