vendredi 22 janvier 2021

Checkbox like radio button, limit to only one selection, uncheck if other checkbox is checked

The current js works fine, but at the moment it's possible to select multiple checkboxes. However, I want to limit only the selection to only one checkbox , so that checkboxes would behave like radio buttons - if one is checked the other one is unchecked, and that only one checkbox is allowed :

JS code:

/* * * * * * * * * * * * * * * * * *
* 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();

and here is the html code:

<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>



Aucun commentaire:

Enregistrer un commentaire