Question

我需要您的帮助，以找出如何在同级div下调用输入type = checkbox，然后是单击大于2时无法调用的复选框

这是代码

\DateTime

$("#qwrap27491 :checkbox").click(function() {
  if ($("#qwrap27491 :checkbox:checked").length >= 3) {
    $("#qwrap27491 :checkbox:not(:checked)").attr("disabled", "disabled");
    Alert("Please choose only 2 cases");
  } else {
    $("#qwrap27491 :checkbox").attr("disabled", "");
  }
});

PS：我无法编辑HTML，这就是为什么我试图通过脚本找到解决方案的原因。

谢谢 BKC

Answer 1

作为用户，我希望您会阻止我进行无效选择。一旦选择了最大数量的框，下面的我的解决方案将禁用所有未选中的复选框。

const
  container = document.getElementById('qwrap27491');

function onCheckboxChanged(event) {
  const
    // Get all the checkboxes inside the container element. querySelectorAll
    // will return a NodeList, convert it to an array so we can use filter 
    // and forEach.
    checkboxes = Array.from(container.querySelectorAll('input[type="checkbox"]')),
    // Filter the checkboxes so we have an array with just the selected checkboxes.
    // From this array we only want to know how many items it contains.
    selectCount = checkboxes.filter(checkbox => checkbox.checked).length;
    
  // Iterate over all the checkboxes.
  checkboxes.forEach(checkbox => {
    // If the checkbox is selected just skip it.
    if (checkbox.checked) {
      return;
    }
    
    // All other checkboxes should be disabled when there are already
    // 2 checkboxes selected.
    checkbox.disabled = (selectCount === 2);
  });
}

// Add a change listener to the container element if we managed
// to retrieve it from the DOM. Whenever a checkbox contained by
// this element is changed we will receive the change event.
if (container !== null) {
  container.addEventListener('change', onCheckboxChanged);
}

label {
  display: flex;
}

<div id="qwrap27491" class="Question">
  <div class="checkboxQuestion">
    <div class="checkboxleft">
      <div class="qNumber" style="display: none;">0.1.15</div><label for="q27491" title="q27491" style="max-width: 385px;">CheckList</label></div>
    <div class="checkboxGroup">
      <div class="button-holder"> 
      <label style="max-width: 385px;">
        <div class="checkboxitem">
          <input type="checkbox" id="q27491" name="q27491" value="1568">
        </div>
        <div class="checkboxlabel">5</div>
      </label>
    </div>
      <div class="button-holder"><label style="max-width: 385px;"><div class="checkboxitem"><input type="checkbox" id="q27491" name="q27491" value="1567"></div><div class="checkboxlabel">4</div></label></div>
      <div class="button-holder"><label style="max-width: 385px;"><div class="checkboxitem"><input type="checkbox" id="q27491" name="q27491" value="1566"></div><div class="checkboxlabel">3</div></label></div>
      <div class="button-holder"><label style="max-width: 385px;"><div class="checkboxitem"><input type="checkbox" id="q27491" name="q27491" value="1565"></div><div class="checkboxlabel">2</div></label></div>
      <div class="button-holder"><label style="max-width: 385px;"><div class="checkboxitem"><input type="checkbox" id="q27491" name="q27491" value="1564"></div><div class="checkboxlabel">1</div></label></div>
    </div>
  </div>
</div>

JavaScript：已选中“限制”复选框以查找特定的Div ID

1 个答案: