如何获取数组的每个元素？ [关闭]

Question

我有一个 javascript function，它在每个 button 旁边插入一个 checkbox 类型的 input。当第一个复选框被点击时，其各自的按钮被禁用，并且该复选框在页面被刷新时保持不变，同样，当再次点击该复选框时，该按钮被重新启用并在页面刷新后保持。

我的目标是，当单击与按钮相关的复选框时，只有该按钮被禁用。发生的事情是只有第一个复选框触发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);
  });
});

JSFiddle

这是允许复选框在刷新页面后保持启用/禁用的代码

$(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'));
}

JSFiddle

理想的情况是同时加入这两个功能，但我一直在尝试，但没有成功。

Answer 1

主要问题是因为循环构建 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 sn-ps 是沙盒并且无法访问 localStorage）

jsFiddle

Answer 2

删除button 改用label 并使用css 使label 看起来像button。在label 中添加for 属性与button 中的id 相同，但请记住使每个id 不同，简单的方法是连接数组index 或id 这样的元素：

<label for="#<%= turma.id %><%= turma.nome %>"></label>
<input id="<%= turma.id %><%= turma.nome %>" value="<%= turma.nome %>">

如果您再次遇到问题，请提供您的评论。谢谢