У меня есть много флажков, присутствующих на веб-странице. Итак, в основном структура такая:
Флажок Yes CheckboxNo Текстовое поле
Итак, у меня есть около сотен вышеупомянутых наборов, в которых есть два флажка, показывающих да или нет с текстовым полем для его объяснения. Мой запрос заключается в том, что когда пользователь нажимает "да", текстовое поле будет включено, и в противном случае оно будет отключено. может сделать это и на некоторых моих страницах: IsProcess - это класс, заданный каждому набору флажков, чтобы я мог над ним работать. CheckboxYes - это идентификатор флажка, который представляет "да". TextboxId - это идентификатор текстового поля, который по умолчанию отключен.
Просмотр страницы
<div style="width: 100%; float: left; padding-bottom: 10px;">
<span style="width: 100%; float: left; line-height: 20px;">Do you currently have thoughts of wishing you were dead?</span>
<div style="width: 10%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadNo, new { @class = "Wishing", @onclick = "Checkme(this.className);" }) No</div>
<div style="width: 30%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadYes, new { @class = "Wishing", @onclick = "Checkme(this.className);" }) Yes ,explain</div>
<div style="float: left; width: 60%;">@Html.TextAreaFor(m => m.WishingDeadExplanation, new { @readonly = "readonly" })</div>
</div>
Сценарий ::
$('.Wishing').click(function () {
if ($("#WishingDeadYes").is(':checked')) {
$("#WishingDeadExplanation").removeAttr("disabled");
}
else {
$("#WishingDeadExplanation").attr("disabled", "disabled");
$("#WishingDeadExplanation").val('');
}
});
Так что я в порядке с этим, но проблема возникает, когда у вас сотни сотен наборов. Я должен написать тысячи вышеуказанных строк. Пожалуйста, помогите.
<input type="checkbox" class="abc" value="yes">
<Script type="text/javascript">
$(.abc).is(':checked'))
{
//set your value here
}
</Script>
У вас могут быть разные классы для обоих флажков.
<div style="width: 100%; float: left; padding-bottom: 10px;">
<span style="width: 100%; float: left; line-height: 20px;">Do you currently have thoughts of wishing you were dead?</span>
<div style="width: 10%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadNo, new { @class = "WishingNo", @onclick = "Checkme(this.className);" }) No</div>
<div style="width: 30%; float: left;">@Html.CheckBoxFor(m => m.WishingDeadYes, new { @class = "WishingYes", @onclick = "Checkme(this.className);" }) Yes ,explain</div>
<div style="float: left; width: 60%;">@Html.TextAreaFor(m => m.WishingDeadExplanation, new { @readonly = "readonly" })</div>
</div>
затем привяжите событие только к флажку WishingYes. и событие, если у вас будет тысяча наборов, как указано выше, вам не нужно писать другой код.
Обратите внимание, что я написал код, предполагающий, что вы будете иметь тот же дизайн, что и выше, для каждого набора флажков и текстового поля
$('.WishingYes').click(function () {
if ($(this).is(':checked')) {
$(this).parent().next('div').find("textarea").removeAttr("disabled");
}
else {
$(this).parent().next('div').find("textarea").prop("disabled", "disabled");
$(this).parent().next('div').find("textarea").val('');
}
});