这是我的代码:
如果未选中下面的复选框,我想禁用这两个按钮
<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>
最佳答案
为复选框上的 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>
关于javascript - 如果同一行中的复选框未选中,则禁用表列内的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54499120/