Enable and Disable Checkbox Group for Multiple and Single Selection-CodePudding

I am trying to write a function to call for enabling only single checkbox to select or enable multiple selection. MultipleCheckbox(0): allow only single selection. MultipleCheckbox(1): allow multiple selection.

function MultipleCheckbox(elem){
        if (elem ==0){
           $('input[type="checkbox"]').on('change', function() {
               $('input[type="checkbox"]').not(this).prop('checked', false);
            });
            } else {
             $('input[type=checkbox]').each(function() {
                 $('input[type="checkbox"]').prop('checked', false);
              });
            }
         }

<table style="text-align: center;">
  <tbody>
     <tr style="text-align: center;">
          <td>
            <input type="checkbox" id="Monday" data-day="1" name="Monday" value="1"  />
             <label for="Monday">Mon</label>
           </td>
           <td>
           <input type="checkbox" id="Tuesday" data-day="2" name="Tuesday" value="2"  />
            <label for="Tuesday">Tues</label>
           </td>
           <td>
           <input type="checkbox" id="Wednesday" data-day="3" name="Wednesday" value="3"  />
           <label for="Wednesday">Wed</label>
           </td>
           <td>
           <input type="checkbox" id="Thursday" data-day="4" name="Thursday" value="4"  />
           <label for="Thursday">Thur</label>
           </td>
           <td>
           <input type="checkbox" id="Friday" data-day="5" name="Friday" value="5"  />
           <label for="Friday">Fri</label>
          </td>
     </tr>
  </tbody>
</table>

CodePudding user response：

Ok. I have a solution for you. Replace:

<div onclick="MultipleCheckbox(0);">Only Single Selection</div> 
<div onclick="MultipleCheckbox(1);">Allow Multiple Selection</div>

with:

<div id="single-checkbox">Only Single Selection</div> 
<div id="multiple-checkboxes">Allow Multiple Selection</div>

And here is query script:

$(document).ready(function() {
    
    var singleCheck = true;
    var checkedIndexes = [];

    $('input[type="checkbox"]').on("change", function() {

        if(singleCheck) {
            // single check
            $('input[type="checkbox"]').not(this).prop('checked', false);
        } else {
            // multiple check
            if($(this).is(':checked')) {
                    checkedIndexes.push($(this).val() - 1);
                    console.log("multiple: "   checkedIndexes.length)
                    console.log($(this).val() - 1)
        } else {
       
          if(checkedIndexes.indexOf($(this).val() - 1) !== 'undefined'){
              checkedIndexes.splice(checkedIndexes.indexOf($(this).val() - 1), 1);
            }

        }

      $.each(checkedIndexes, function(i) {
        $('input[type=checkbox]').eq(checkedIndexes[i]).prop('checked', true);
      });
        }
    });


    $('#single-checkbox').on("click", function() {
        singleCheck = true;
    });

    $('#multiple-checkboxes').on('click', function() {
        singleCheck = false;
        checkedIndexes = [];
    });
});

CodePudding user response：

$(document).ready(function() {
    
    var checkedIndexes = [];
    
    $('input[name="week"]').on('change', function () {
                            $('input[name="week"]').not(this).prop('checked', false);
                         });
               
                $('input:radio[name=name]:checked').change(function () {
            if ($("input[name='name']:checked").val() == 'one') {
               $('[type="checkbox"]').unbind('change');
               $('[type="checkbox"]').not(this).prop('checked', false);
               
               
               $('input[name="week"]').on('change', function () {
                            $('input[name="week"]').not(this).prop('checked', false);
                         });

            }
            if ($("input[name='name']:checked").val() == 'two') {
                $('[type="checkbox"]').not(this).prop('checked', false);
                
                $('[type="checkbox"]').unbind('change');
                
                $('input[name="week"]').on('change', function () {
                            
                         });
               
            }
        });        

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="name" id="one" value="one" checked/> Allow Single
<input type="radio" name="name" id="two" value="two"/> Multiple

<table style="text-align: center;">
  <tbody>
     <tr style="text-align: center;">
          <td>
            <input type="checkbox" id="Monday" data-day="1" name="week" value="1"  />
             <label for="Monday">Mon</label>
           </td>
           <td>
           <input type="checkbox" id="Tuesday" data-day="2" name="week" value="2"  />
            <label for="Tuesday">Tues</label>
           </td>
           <td>
           <input type="checkbox" id="Wednesday" data-day="3" name="week" value="3"  />
           <label for="Wednesday">Wed</label>
           </td>
           <td>
           <input type="checkbox" id="Thursday" data-day="4" name="week" value="4"  />
           <label for="Thursday">Thur</label>
           </td>
           <td>
           <input type="checkbox" id="Friday" data-day="5" name="Friday" value="5"  />
           <label for="Friday">Fri</label>
          </td>
     </tr>
  </tbody>
</table>