[英]How to disable other input fields of same row
A similar question was asked HERE disabling all other input fields on same row on keyup event of any of the input fields. 类似的问题被问这里禁止对同一行的所有其他输入字段上KEYUP的任何输入字段的事件。
In my case i have two dependents rows: 就我而言,我有两个依赖行:
HTML: HTML:
<form method="post">
<tr>
<th>Student</th>
<th>Roll</th>
<th>Present / Absent</th>
<th>Is late</th>
<th>How long (minutes)</th>
</tr>
<tr>
<td>
User1
</td>
<td>
001
</td>
<td>
<div>
<input type="checkbox" id="checkbox2"/>
<label id="labelCheckbox2" class="form-check-label" for="checkbox2">Absent</label>
</div>
</td>
<td>
<div>
<label>
No
<input type="checkbox" id="is_late" disabled>
<span></span> Yes
</label>
</div>
</td>
<td>
<input type="number" id="late_coming" name="late_coming_time" hidden>
</td>
</tr>
</table>
<button type="submit" id="saveAttendance" hidden>
Save
</button>
</form>
Script: 脚本:
$(document).ready(function(){
// present / absent
$("#materialChecked2").change(function(){
var isChecked = $('#materialChecked2').prop('checked');
if (isChecked){
$('#labelMaterialChecked2').text('Present');
$('#is_late').removeAttr('disabled');
}else{
$('#labelMaterialChecked2').text('Absent');
$('#is_late').removeAttr('checked');
$('#is_late').attr('disabled', 'disabled');
}
});
// late coming
$("#is_late").change(function(){
var isChecked = $('#is_late').prop('checked');
if (isChecked){
console.log("checked")
$('#late_coming').removeAttr('hidden');
}else{
$('#late_coming').attr('hidden', 'hidden');
}
});
});
It currently work on the first row; 当前它在第一行上工作; and i've spend hours trying to make it work for any number of rows but no success.
而且我已经花了数小时试图使其适用于任意数量的行,但没有成功。
Any help will be appreciated, thank you in advance 任何帮助将不胜感激,在此先感谢您
$("#is_late").change(
Stop using the same ID for multiple elements - IDs must be unique in the whole page - and start using classes instead. 停止对多个元素使用相同的ID-ID在整个页面中必须是唯一的-而是开始使用类。
<input type="checkbox" class="is_late" disabled>
and 和
$(".is_late").change(
You then need to limit to the current row, giving: 然后,您需要限制在当前行,给出:
$(".is_late").change(function() {
var row = $(this).closest("tr");
var isChecked = $(this).prop('checked');
if (isChecked) {
console.log("checked")
row.find(".late_coming").removeAttr('hidden');
} else {
row.find(".late_coming").attr('hidden', 'hidden');
}
// or just:
//row.find(".late_coming").show(isChecked);
});
Apply where ever you are currently using $("#...
在您当前使用
$("#...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.