像单选按钮一样的复选框，仅限于一个选择，取消选中是否选中了其他复选框

Question

当前的 js 工作正常，但目前可以选择多个复选框。但是，我只想将选择限制为一个复选框，以便复选框的行为类似于单选按钮 - 如果选中一个，则另一个未选中，并且只允许一个复选框：

JS代码：

/* * * * * * * * * * * * * * * * * *
* Show/hide fields conditionally
* * * * * * * * * * * * * * * * * */
(function($) {
$.fn.conditionize = function(options){ 
  
   var settings = $.extend({
      hideJS: true
  }, options );
  
  $.fn.showOrHide = function(listenTo, listenFor, $section) {
    if ($(listenTo).is('select, input[type=text]') && $(listenTo).val() == listenFor ) {
      $section.slideDown();
    }
    else if ($(listenTo + ":checked").val() == listenFor) {
      $section.slideDown();
    }
    else {
      $section.slideUp();
    }
  } 

  return this.each( function() {
    var listenTo = "[name=" + $(this).data('cond-option') + "]";
    var listenFor = $(this).data('cond-value');
    var $section = $(this);

    //Set up event listener
    $(listenTo).on('change', function() {
      $.fn.showOrHide(listenTo, listenFor, $section);
    });
    //If setting was chosen, hide everything first...
    if (settings.hideJS) {
      $(this).hide();
    }
    //Show based on current value on page load
    $.fn.showOrHide(listenTo, listenFor, $section);
  });
}
}(jQuery));

$('.conditional').conditionize();

这里是html代码：

<div id="demo">
  <h3>I'm interested in</h3>
  <label class="solo"><input type="radio" name="example1" value="private"><span></span>
    <span class="label-icon"><i class="fas fa-users"></i> Solo/Private Lessons</span>
  </label>
  <label class="group"><input type="radio" name="example1" value="group"><span></span>
    <span class="label-icon"><i class="fas fa-users"></i> Group Lessons</span>
  </label>
    <label class="workshop"><input type="radio" name="example1" value="workshop"><span></span>
      <span class="label-icon"><i class="fas fa-guitar"></i> Workshops and Clinics</span>
    </label>

  <div class="conditional" data-cond-option="example1" data-cond-value="private">
    <h4>Which instruments are you interested in learning?</h4>
    <label><input type="checkbox" name="guitar"><span></span> Guitar</label>
    <label><input type="checkbox" name="drums"><span></span> Drums</label>
      <label><input type="checkbox" name="violin"><span></span> Violin</label>
      <label><input type="checkbox" name="example3"><span></span> Bass</label>
      <label><input type="checkbox" name="example3"><span></span> Flute</label>
      <label><input type="checkbox" name="example3"><span></span> Saxophone</label>
      <label><input type="checkbox" name="example3"><span></span> Other</label>


      <div class="years-of-experience">
    <div class="conditional inline" data-cond-option="guitar" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in guitar</label>
    </div>
    <div class="conditional" data-cond-option="drums" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in drums</label>
    </div>
    <div class="conditional" data-cond-option="violin" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in violin</label>
    </div>
  </div>

      <div class="student-profile">
        <h4>Tell us a little more about yourself:</h4>
        <!-- Name -->
        <div>
          Student name<br>
            <input type="text" value="First"> <input type="text" value="Last">
        </div>
        <div>
          <label>Age<br>
            <span class="explanation">Currently accepting students 5+</span>
            <input type="text"></label>
        </div>
        <div>
          <label>Parent/guardian name
            <span class="explanation">If student is a minor</span>
             <input type="text" value="First"> <input type="text" value="Last">
        </div>
        <div>
          <label>Occupation
            <span class="explanation">If student, list school</span>
             <input type="text"></label>
        </div>
      </div><!-- /.student-profile -->
      <input type="submit" class="big-blue-button" value="Let's take a look at the class contract &rarr;">
  </div><!-- .solo-classes -->

  <div class="conditional" data-cond-option="example1" data-cond-value="group">
    <p>What kind of group lessons are you interested in?</p>
  </div>

  <div class="conditional" data-cond-option="example1" data-cond-value="workshop">
    <p>What kind of workshops are you interested in?</p>
  </div>

</div>

Answer 1

我只找到了以下方式

首先： 将属性 onClick 和值 check(this) 添加到您的每个复选框。

第二： 将以下 jquery 函数添加到您的代码中：

function check(clickedObj)
{
  //Have you clicked checkbox checked or not?
  let checkboxState =$(clickedObj).prop( "checked" );
  //Find the container div and the find all containing checkboxes
  let checkboxes = $(clickedObj).parent().parent().find("input[type='checkbox']");
  //Loop through all foundend checkboxes and uncheck all
  $(checkboxes).each(function()
  {
    $(this).removeAttr("checked");
  })
  //Restore selected checkbox state in case you wanted to check it
  if (checkboxState == true) {
    $(clickedObj).prop("checked", true);
  }
}

根据我的 jsfiddle 它确实有效。欢迎任何改进的想法。 :-)