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

Posted 2023-02-19

【中文标题】WordPress：只允许选中字段集中的一个复选框

【英文标题】：WordPress: Allow to only check one checkbox in a fieldset

【发布时间】：2021-12-31 10:55:57

【问题描述】：

我正在使用 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>

不清楚最后有多少字段集/问题。所以我需要一个灵活的解决方案。

我找到了一些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;
     );
 );

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

【问题讨论】：

您要制作“独占”复选框？

是的，每个字段集

【参考方案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 说复选框不应该用作单选按钮，反之亦然。不惜一切代价。

【讨论】：

像魅力一样工作，谢谢。我必须在我的用例中使用复选框，并且不能更改为单选按钮。