当您在 mvc 中循环时，如何在 jquery 中启用/禁用 ASP.NET 关联复选框的文本框?

Question

我做了一个糟糕的尝试，它有点工作，直到有超过 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>

Answer 1

由于您有一个<div class="question-block">元素作为文本框和复选框输入的父容器，因此您可以使用相对选择器

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

请注意，禁用的输入不会回发值，因此如果您希望将值绑定到模型，则使用readonly而不是disabled可能更合适

Answer 2

花一分钟时间阅读;

解耦你的 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，并通过data-target告诉它jQuery目标，可以是一个或多个元素，甚至是选择器，甚至是像#myform input[type=text], #myform textarea这样复杂的东西。