1

我做了一个糟糕的尝试，它一直工作到超过 10 个项目为止。我只是取关联文本框的名称并尝试将其与复选框匹配，但它很丑。这个 ？

 $('.naCheckbox').click(function () {
        var $this = $(this);

        var checkboxId = $this.attr("id");
        var textboxId = checkboxId.slice(0, 16) + "ProfileAnswerText";

        if ($this.is(':checked')) {
            $('#' + textboxId).attr("disabled", "disabled")
        } else {
            $('#' + textboxId).removeAttr("disabled");
        }
    });



 <div id="tabs-1" class="tabTwo">
                    @for (var i = 0; i < Model.ProfileItems.Count(); i++)
                    {
                    <div class="question-block">
                        <p> @Html.HiddenFor(m => m.ProfileItems[i].ProfileFieldId)</p>
                        <p class="questions"> @Model.ProfileItems[i].ProfileQuestionText </p>

                        @if (Model.ProfileItems[i].NotApp == true)
                        {
                            @Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, new { disabled = "disabled", @class = "autofit" })
                        }
                        else
                        {
                            @Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, new { @class = "autofit" })
                        }

                        <label style="float: right; text-align:unset; width:220px;">
                            N/A
                            @Html.CheckBoxFor(m => m.ProfileItems[i].NotApp, new { @class = "naCheckbox" })
                        </label>
                    </div>
                    }
                </div>
4

2 回答 2

1

Since you have a <div class="question-block"> element as a parent container for both the textbox and checkbox inputs, you can use relative selectors

$('.naCheckbox').click(function () {
    var isChecked = $(this).is(':checked');
    var parent = $(this).closest('.question-block'); // get the enclosing div
    var textbox = parent.find('.autofit'); // get the associated textbox
    textbox.prop('disabled', isChecked); // use .prop() rather that .attr()
});

Note that disabled inputs will not post back a value, so using readonly rather than disabled may be more appropriate if you want the value to be bound to your model

于 2018-10-29T21:48:00.460 回答
1

花一分钟阅读；

解耦 HTML、CSS 和 JavaScript

您可以创建一个超级通用函数：

    $('.js-checkbox-disable-toggle').on("click", (e) => {
      var $checkbox = $(e.currentTarget);
      var isChecked = $checkbox.prop('checked');
      var targetSelector = $checkbox.data('target');
      var $target = $(targetSelector);
      $target.prop('disabled', isChecked);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="js-checkbox-disable-toggle" data-target=".asdf, .qwerty" />I target asdf and qwerty<br/>

<input type="checkbox" class="js-checkbox-disable-toggle asdf" data-target=".qwerty" />I am asdf, I target qwerty<br/>

<input type="checkbox" class="qwerty" />I am qwerty, I don't do anything<br/>

稍微改变你的HTML：

@Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, 
  new { disabled = "disabled", @class = "autofit disable-toggle-@(i)" })


@Html.TextAreaFor(m => m.ProfileItems[i].ProfileAnswerText, 
  new { @class = "autofit disable-toggle-@(i)" })

// with js-checkbox-enable-toggle
// anyone should figure out that this checkbox toggles enables :D
@Html.CheckBoxFor(m => m.ProfileItems[i].NotApp, 
  new { @class = "naCheckbox js-checkbox-disable-toggle", data_target=".disable-toggle-@(i)" })

它应该呈现如下内容：

<textarea name="ProfileItems[1].ProfileAnswerText class="autofit disable-toggle-1">
</textarea>

<input type="checkbox" 
  name="ProfileItems[1].NotApp" class="naCheckbox js-checkbox-disable-toggle"
  data_target=".disable-toggle-1" />

2.. 3.. 4...

现在，任何时候你想要一个复选框来启用/禁用一个项目，你可以简单地js-checkbox-disable-toggle在复选框上添加，并告诉它jQuery的目标是什么data-target，可以是一个或多个元素，甚至是选择器，甚至是复杂的东西，如#myform input[type=text], #myform textarea.

于 2018-10-29T22:17:06.173 回答