使用相关复选框jQuery启用/禁用由数组生成的输入,可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" value="input1"> Input 1
<input type="checkbox" id="checkbox2" value="input2"> Input 2
<input type="checkbox" id="checkbox3" value="input3"> Input 3
<input type="text" id="input1" disabled>
<input type="text" id="input2" disabled>
<input type="text" id="input3" disabled>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputId = $(this).val();
var inputElement = $('#' + inputId);
if ($(this).is(':checked')) {
inputElement.prop('disabled', false);
} else {
inputElement.prop('disabled', true);
}
});
});
在上述代码中,我们使用了jQuery的change
事件来监听复选框的变化。当复选框的状态改变时,我们获取对应的输入元素的ID,并使用prop
方法来启用或禁用输入元素。
这样,当用户勾选复选框时,对应的输入元素将被启用,用户可以输入内容;当用户取消勾选复选框时,对应的输入元素将被禁用,用户无法输入内容。
这个方法适用于需要根据用户选择动态启用或禁用输入元素的场景,例如表单中的选项依赖于其他选项的情况。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云