Javascript 在两个html字段之间形成关系
我有一个复选框,当选中时,多个其他字段可供用户输入数据 现在我有很多这样的事件,处理每个事件的检查事件变得越来越困难,所以我创建了一个onclick事件来监听类的检查事件Javascript 在两个html字段之间形成关系,javascript,jquery,html,Javascript,Jquery,Html,我有一个复选框,当选中时,多个其他字段可供用户输入数据 现在我有很多这样的事件,处理每个事件的检查事件变得越来越困难,所以我创建了一个onclick事件来监听类的检查事件 <table> <tr> <td> <label class="app-form-label"> <input type="checkbox" name="Sem1CourseOffer" id="chkSem1CourseOffer
<table>
<tr>
<td>
<label class="app-form-label">
<input type="checkbox" name="Sem1CourseOffer" id="chkSem1CourseOffer" class="disableEnableField" value="Semester 1">Semester 1</label>
</td>
<td>
<div style="float:left">
<label style="display:block">
<input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Face to Face" class="enableDisable1">Face to Face</label>
<label style="display:block">
<input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Print" class="enableDisable1">Print</label>
<label style="display:block">
<input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Blended" class="enableDisable1">Blended</label>
<label style="display:block">
<input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Online" class="enableDisable1">Online</label>
<label style="display:block">
<input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Other" class="enableDisable1">Other</label>
</div>
<textarea name="Sem1CourseOfferModeComment" id="txtSem1CourseOfferModeComment" disabled="disabled" class="control-label enableDisable1" style="width: 50%; margin-left:20px; height:100%"></textarea>
</td>
</tr>
<tr>
<td>
<label class="app-form-label">
<input type="checkbox" name="Sem2CourseOffer" id="chkSem2CourseOffer" class="disableEnableField" value="Semester 2">Semester 2</label>
</td>
<td>
<div style="float:left">
<label style="display:block">
<input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Face to Face" class="enableDisable2">Face to Face</label>
<label style="display:block">
<input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Print" class="enableDisable2">Print</label>
<label style="display:block">
<input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Blended" class="enableDisable2">Blended</label>
<label style="display:block">
<input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Online" class="enableDisable2">Online</label>
<label style="display:block">
<input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Other" class="enableDisable2">Other</label>
</div>
<textarea name="Sem2CourseOfferModeComment" id="txtSem2CourseOfferModeComment" disabled="disabled" class="control-label enableDisable2" style="width: 50%; margin-left:20px; height:100%"></textarea>
</td>
</tr>
</table>
以下是我的设置的工作演示(功能不正确):
在演示中,如果单击semester1,则相应的正确元素的disable属性将发生更改。但是对于Semest2,它是不正确的,因为我硬编码了属性。我需要一种方法让onclick选择复选框需要修改的对应元素。可能通过元素的属性?您可以执行以下操作:
$(function () {
$(".disableEnableField").change(function () {
if ($(this).is(':checked')) {
$('.enableDisable1').prop("disabled", false)
} else {
$('.enableDisable1').prop("disabled", true)
}
});
});
<input type="checkbox" name="Sem2CourseOffer" data-trigger-class="enableDisable2"...
hth这将通过以下方式启用或禁用下一个单元格中的所有元素:
$(function () {
$(".disableEnableField").change(function () {
if($(this).is(':checked')) {
$(this).closest('td').next('td').find('*').prop("disabled", false);
} else {
$(this).closest('td').next('td').find('*').prop("disabled", true);
}
});
});
谢谢你!我知道有一种方法可以将细节分配给属性,但不知道“data-*”属性。在复选框和ddl中成功地实现了这一点。谢谢当然,这会使我的代码更整洁,但有时字段位置是不规则的。但是谢谢你的提示!:)
$(function () {
$(".disableEnableField").change(function () {
if($(this).is(':checked')) {
$(this).closest('td').next('td').find('*').prop("disabled", false);
} else {
$(this).closest('td').next('td').find('*').prop("disabled", true);
}
});
});