当没有从我的表中选择记录时,我可以在按钮上放置一个模式。在使用bootstrap 4时,可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<button id="myButton" class="btn btn-primary">模式按钮</button>
使用jQuery:
$(document).ready(function() {
$('#myButton').prop('disabled', true); // 初始状态禁用按钮
$('table').on('change', 'input[type="checkbox"]', function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('#myButton').prop('disabled', false); // 有选中记录时启用按钮
} else {
$('#myButton').prop('disabled', true); // 没有选中记录时禁用按钮
}
});
});
使用纯JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var myButton = document.getElementById('myButton');
myButton.disabled = true; // 初始状态禁用按钮
var checkboxes = document.querySelectorAll('table input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function() {
var checkedCheckboxes = document.querySelectorAll('table input[type="checkbox"]:checked');
if (checkedCheckboxes.length > 0) {
myButton.disabled = false; // 有选中记录时启用按钮
} else {
myButton.disabled = true; // 没有选中记录时禁用按钮
}
});
}
});
这样,当没有从表中选择记录时,按钮将处于禁用状态。一旦有选中的记录,按钮将变为可点击状态。
关于Bootstrap 4的更多信息和使用方法,你可以参考腾讯云的Bootstrap 4产品介绍页面:Bootstrap 4产品介绍
技术创作101训练营
DBTalk技术分享会
云+社区技术沙龙[第21期]
云+社区技术沙龙 [第31期]
技术创作101训练营
云+社区技术沙龙第33期
serverless days
Elastic 中国开发者大会
云+社区技术沙龙[第10期]
领取专属 10元无门槛券
手把手带您无忧上云