如果未选中同一行中的复选框，则禁用表列中的链接
如果未选中同一行中的复选框，则禁用表列中的链接
提问于 2019-02-03 01:24:44
这是我的代码：
如果未选中下面的复选框，我想禁用这两个按钮
<td><a href="manage-bookings.php?aeid=<?php echo htmlentities($result-
>id);?>" onclick="return confirm('Do you really want to Confirm this
booking?')"> Confirm</a> /
<a href="manage-bookings.php?eid=<?php echo htmlentities($result->id);?
>" onclick="return confirm('Do you really want to Cancel this
Request?')"> Cancel</a>
</td>//复选框
<td><input type="checkbox" value="" name="requirements"></td>回答 2
Stack Overflow用户
发布于 2019-02-03 01:42:21
在复选框上为change事件添加一个事件侦听器，这将切换链接父td上的.disabled类，从而忽略指针事件并将其灰显。
下面是一个例子：
const containers = document.querySelectorAll('.link-container')
document
.querySelector('#checkbox')
.addEventListener('change', e => {
containers.forEach(container => {
container.classList.toggle('disabled')
})
})table, th, td {
border: 1px solid #aaa;
border-collapse: collapse;
padding: 6px;
}
td.disabled a {
pointer-events: none;
color: #ccc;
}<table>
<tr>
<td class="link-container">
<a href="https://www.google.com">Visit Google</a>
</td>
<td class="link-container">
<a href="https://www.microsoft.com">Visit Microsoft</a>
</td>
<td>
<input type="checkbox" id="checkbox" checked>
</td>
</tr>
</table>
Stack Overflow用户
发布于 2019-02-03 01:38:58
使用jquery解决此问题
为复选框设置id，如下所示：
<td><input type="checkbox" value="" name="requirements" id="requirements" /></td>然后在jquery中添加一个监听器，检查用户是否选中了复选框，如下所示：
$("#requirements").on('click', function(){
if($(this). prop("checked") == true){
alert("Checkbox is checked." );
link here is enabled
}
else if($(this). prop("checked") == false){
alert("Checkbox is unchecked." );
link here is disabled
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54499120
复制相关文章
相似问题
腾讯云开发者
