问题描述
我有一个 javascript function
,它在每个 input
旁边插入一个 checkBox
类型的 button
。当第一个复选框被点击时,其各自的按钮被禁用,并且该复选框在页面刷新时保持不变,同样的,当再次单击该复选框时,该按钮重新启用并在页面刷新后保持不变。
我的目标是当与按钮相关的复选框被点击时,只有该按钮被禁用。发生的事情是只有第一个复选框触发了 function
,当它被触发时,其他复选框也被触发。当我尝试单击第二个或第三个复选框时,此功能不起作用。
我认为这是因为 forEach()
。我需要的是让这个功能为每个按钮单独工作,并在页面刷新后保持启用/禁用复选框。
<div id="accordion">
<% turmas.forEach((turma)=> { %>
<div class="card">
<div class="card-header" id="headingThree>">
<h5 class="mb-0 d-flex">
<div id="billing">
<input type="checkBox" id="billing-checkBox" checked>
<button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="<%= turma.nome %>" id="btn">
<%= turma.nome %>
</button>
</div>
</h5>
</div>
</div>
<% }) %>
$(document).ready(function() {
$('#billing-checkBox').prop('checked',localStorage.getItem('buttondisabled') !== "disabled");
toggleBilling({
target: $('#billing-checkBox')[0]
})
$('#billing-checkBox').on('change',toggleBilling);
});
function toggleBilling(e) {
$('#billing button').attr('disabled',!e.target.checked)
localStorage.setItem('buttondisabled',$('#billing button').attr('disabled'));
}
24/06/21 更新:
用户@RoryMcCrossan 创建了一个解决方案,让每个复选框单独为每个按钮工作,但有一个问题,当按钮被禁用时,当尝试重新激活它时,它不会在谷歌浏览器上再次启用它。
>jQuery($ => {
$('.billing-checkBox').on('change',e => {
$(e.target).next('button').prop('disabled',!e.checked);
});
});
$(document).ready(function() {
$('.billing-checkBox').prop('checked',localStorage.getItem('buttondisabled') !== "disabled");
toggleBilling({
target: $('.billing-checkBox')[0]
})
$('.billing-checkBox').on('change',toggleBilling);
});
function toggleBilling(e) {
$('.billing input[type="button"]').attr('disabled',!e.target.checked)
localStorage.setItem('buttondisabled',$('.billing input[type="button"]').attr('disabled'));
}
理想的情况是同时加入这两个功能,但我一直在尝试但没有成功。
解决方法
主要问题是因为您在循环构建 HTML 时在多个元素上重复相同的 id
。要更正此问题,请移除 id
属性并改用 class
。
从那里您可以更新您的 jQuery 代码以使用 DOM 遍历来查找与更改的复选框相关的 button
元素。在这种特定情况下,通过使用 next()
方法:
jQuery($ => {
$('.billing-checkbox').on('change',e => {
$(e.target).next('button').prop('disabled',!e.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" />
<div id="accordion">
<!-- repeated content \/ -->
<div class="card">
<div class="card-header headingThree">
<h5 class="mb-0 d-flex">
<div class="billing">
<input type="checkbox" class="billing-checkbox" />
<button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
turma.nome
</button>
</div>
</h5>
</div>
</div>
<!-- repeated content /\ -->
<div class="card">
<div class="card-header headingThree">
<h5 class="mb-0 d-flex">
<div class="billing">
<input type="checkbox" class="billing-checkbox" />
<button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
turma.nome
</button>
</div>
</h5>
</div>
</div>
<div class="card">
<div class="card-header headingThree">
<h5 class="mb-0 d-flex">
<div class="billing">
<input type="checkbox" class="billing-checkbox" />
<button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
turma.nome
</button>
</div>
</h5>
</div>
</div>
<div class="card">
<div class="card-header headingThree">
<h5 class="mb-0 d-flex">
<div class="billing">
<input type="checkbox" class="billing-checkbox" />
<button class="btn btn-info text-white collapsed d-flex align-center" data-toggle="collapse" data-target="#<%= turma.nome %>" aria-expanded="false" aria-controls="turma.nome" id="btn">
turma.nome
</button>
</div>
</h5>
</div>
</div>
</div>
-- 更新 --
鉴于您在下面关于还需要在 localStorage 中保存多个复选框/按钮组合的状态的评论,您可以通过从复选框的状态构建一个数组并存储它来实现这一点。这是一个 jsFiddle 证明(因为 SO 片段被沙盒化并且无法访问 localStorage)
,您面临的问题是由于所有复选框的 ID 重复。使用类名而不是 id 作为选择器。
代替:
$('#billing-checkbox').on('change',toggleBilling);
<input type="checkbox" id="billing-checkbox" checked>
使用:
$('.billing-checkbox').on('change',toggleBilling);
<input type="checkbox" class="billing-checkbox" checked>
,
删除 button
使用 label
并使用 label
使 button
看起来像 css
。在 for
中添加 label
属性与 id
中的 button
相同,但记住让每个 id
不同,简单的方法是连接数组 { {1}} 或 index
的元素如下:
id
如果您再次遇到问题,请提供您的意见。谢谢