如果未选中同一行中的复选框，则禁用表列中的链接
如果未选中同一行中的复选框，则禁用表列中的链接
提问于 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
复制相关文章
点击加载更多
相似问题
如果未选中复选框，则禁用链接。
如果未选中复选框，则禁用Button
如果未选中复选框，则禁用textbox
如果未选中复选框，则禁用按钮。
如果选中/未选中复选框，则启用/禁用按钮
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
