需要使用 JavaScript 动态创建的复选框不起作用

Question

我使用 vanilla JavaScript 动态创建了一个复选框。我想做的是，如果没有选择任何元素，它不应该提交表单。

动态生成的 HTML 是：

<form>
    <div id="div_drager">
      <div id="cardDiv_1" class="card p-3 my-3">
        <div class="d-flex justify-content-between">
          <label class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1" class="body-wrapper" required>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0">
              <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1">
              <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2">
              <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6">
              <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>

谁能帮我确定出了什么问题？

谢谢。

Answer 1

你的HTML没问题。 不幸的是，您的 JavaScript 验证码中似乎存在一些问题，您没有显示。

我建议作为一种更好的方法在验证表单时启用/禁用按钮。 您可以在form元素上添加委托change事件。 从input元素引发的事件将冒泡到表单。

下面是一个验证 2 组复选框的示例。 在每个组中必须至少选择一个。

 (()=> { const myForm1 = document.getElementById('my-form-1'), submit = document.getElementById('my-form-1-submit'), validateMin1SelectedPerGroup = ev => submit.disabled = Array.from(ev.currentTarget.querySelectorAll(':scope fieldset')).reduce( (aggr, fieldset) => aggr || fieldset.querySelectorAll(':scope input[type=checkbox]:checked').length < 1, false ); validateMin1SelectedPerGroup({currentTarget: myForm1}); // initialize myForm1.addEventListener('change', validateMin1SelectedPerGroup); })();

 <form id="my-form-1"> <fieldset> <legend>Group 1:</legend> <div id="div_drager"> <div id="cardDiv_1" class="card p-3 my-3"> <div class="d-flex justify-content-between"> <label title="Tooltip" class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label> </div> <div id="bodyWrapper_1" class="body-wrapper" required> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0"> <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1"><label title="Tooltip" id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label> </div> </div> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1"> <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label> </div> </div> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2"> <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label> </div> </div> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6"> <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label> </div> </div> </div> </div> </div> </fieldset> <fieldset> <legend>Group 2:</legend> <div><input type="checkbox" name="cb_1"><label class="radio-label-label">Option 1</label></div> <div><input type="checkbox" name="cb_2"><label class="radio-label-label">Option 2</label></div> <div><input type="checkbox" name="cb_3"><label class="radio-label-label">Option 3</label></div> </fieldset> <input id="my-form-1-submit" type="submit" /> </form>

Answer 2

因此，我从代码中的以下几行中删除了 ids，它开始工作了：

<div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0">
<div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1">
<div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2">
<div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6">

但我相信，这不是解决方案，因为当您动态生成某些内容时，可能需要拥有 id。

以下代码对我有用，但我认为这不是正确的解决方案。

<form>
    <div id="div_drager">
      <div id="cardDiv_1" class="card p-3 my-3">
        <div class="d-flex justify-content-between">
          <label class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1" class="body-wrapper" >
          <div class="d-flex justify-content-between py-2" >
            <div class="d-flex align-item-center w-100" >
              <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1" required><label id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100">
              <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" >
              <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100">
              <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>