如何获取数组的每个元素？

如何解决如何获取数组的每个元素？

我有一个 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);
  });
});

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

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

解决方法

主要问题是因为您在循环构建 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）

jsFiddle

,

您面临的问题是由于所有复选框的 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

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