I'm using Gravity Forms and the quiz add-on to build a survey. Every question should have only one accepted answer. But all answers should be "correct".

The quiz add-on works in a different way. It allows only one correct answer for radio buttons. I couldn't limit checkboxes to only one answer.

So I guess I have to work with custom JavaScript to allow only one answer or checked box per fieldset.

The fieldset for a question looks like this:

<fieldset id="field_3_1" class="gfield" data-field-class="gquiz-field">
    <legend class="gfield_label gfield_label_before_complex">Question 1</legend>
    <div >
        <div  id="input_3_1">
            <div >
                <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 >
                <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 >
                <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>

It's not clear how many fieldsets/questions are present at the end. So I need a flexible solution.

I found some JS Code 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;
     });
 });

But I'm not sure how to adapt it for my use case

CodePudding user response：

This script will make each checkbox per fieldset exclusive.

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

An alternative solution could be to use radio buttons, and use css to make them look like checkboxes. But UX says that checkboxes shouldn't be used as radio buttons, and vice versa. For whatever that's worth.