Question

我有一个MVC应用程序，我有一类bools。如果项目被指示为已拒绝，则每个开关旁边都有一个textarea来输入注释（返回false）。如果将swith设置为Accepted（返回true），我需要禁用textarea。我搜索了广告，但无法找到合适的解决方案。我知道在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字段。

Answer 1

如果没有看到呈现的HTML，则有点难以提供帮助。我重新创建了代码in this demo 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()不接受选择器参数。请参阅the docs here。

禁用textarea复选框：选中bootstrap-switch

1 个答案: