WordPress：允许只选中字段集中的一个复选框

Question

我正在使用 Gravity Forms 和测验插件来进行调查。每个问题应该只有一个可接受的答案。但所有的答案都应该是“正确的”。

测验插件以不同的方式工作。对于单选按钮，它只允许一个正确答案。我无法将复选框限制为只有一个答案。

所以我想我必须使用自定义 JavaScript 以允许每个字段集只允许一个答案或选中的框。

问题的字段集如下所示：

<fieldset id="field_3_1" class="gfield" data-field-class="gquiz-field">
    <legend class="gfield_label gfield_label_before_complex">Question 1</legend>
    <div class="ginput_container ginput_container_checkbox">
        <div class="gfield_checkbox" id="input_3_1">
            <div class="gchoice gchoice_3_1_1">
                <input class="gfield-choice-input" name="input_1.1" type="checkbox" value="gquiz21dc402fa" id="choice_3_1_1">
                <label for="choice_3_1_1" id="label_3_1_1">Answer 1</label>
            </div>
            <div class="gchoice gchoice_3_1_2">
                <input class="gfield-choice-input" name="input_1.2" type="checkbox" value="gquiz3414cb0c0" id="choice_3_1_2">
                <label for="choice_3_1_2" id="label_3_1_2">Answer 2</label>
            </div>
            <div class="gchoice gchoice_3_1_3">
                <input class="gfield-choice-input" name="input_1.3" type="checkbox" value="gquiz21d0214b9" id="choice_3_1_3">
                <label for="choice_3_1_3" id="label_3_1_3">Answer 3</label>
            </div>
        </div>
    </div>
</fieldset>

不清楚最后有多少 fieldsets/questions。所以我需要一个灵活的解决方案。

我找到了一些 JS 代码 here:

 $(function () {
     $('input[type=checkbox]').click(function () {
         var chks = document.getElementById('<%= chkRoleInTransaction.ClientID %>').getElementsByTagName('INPUT');
         for (i = 0; i < chks.length; i++) {
            chks[i].checked = false;
         }
         if (chks.length > 1)
            $(this)[0].checked = true;
     });
 });

但我不确定如何根据我的用例调整它

Answer 1

此脚本将使每个字段集的每个复选框独占。

jQuery(function($) {
  $('fieldset input[type="checkbox"]').on('change', function() {
    // Set the checkbox just checked.
    let just_checked = $(this);
    // Get all of the checkboxes in the fieldset.
    let all_checkboxes = just_checked.closest('fieldset').find('input[type="checkbox"]');
    $.each(all_checkboxes, function(i, v) { // Loop through each of the checkboxes.
      if (just_checked.prop('id') === $(v).prop('id')) {
        // Check the one just checked.
        $(v).prop('checked', true);
      } else {
        // Uncheck the others.
        $(v).prop('checked', false);
      }
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="field_3_1" class="gfield" data-field-class="gquiz-field">
  <legend class="gfield_label gfield_label_before_complex">Question 1</legend>
  <div class="ginput_container ginput_container_checkbox">
    <div class="gfield_checkbox" id="input_3_1">
      <div class="gchoice gchoice_3_1_1">
        <input class="gfield-choice-input" name="input_1.1" type="checkbox" value="gquiz21dc402fa" id="choice_3_1_1">
        <label for="choice_3_1_1" id="label_3_1_1">Answer 1</label>
      </div>
      <div class="gchoice gchoice_3_1_2">
        <input class="gfield-choice-input" name="input_1.2" type="checkbox" value="gquiz3414cb0c0" id="choice_3_1_2">
        <label for="choice_3_1_2" id="label_3_1_2">Answer 2</label>
      </div>
      <div class="gchoice gchoice_3_1_3">
        <input class="gfield-choice-input" name="input_1.3" type="checkbox" value="gquiz21d0214b9" id="choice_3_1_3">
        <label for="choice_3_1_3" id="label_3_1_3">Answer 3</label>
      </div>
    </div>
  </div>
</fieldset>

另一种解决方案是使用单选按钮，并使用 css 使它们看起来像复选框。但是 UX 说复选框不应该用作单选按钮，反之亦然。不惜一切代价。

WordPress：允许只选中字段集中的一个复选框

WordPress: Allow to only check one checkbox in a fieldset

javascript

wordpress

jquery

gravity-forms-plugin

gravityforms