Search code examples
javascriptphphtmljquerycheckbox

Disable other checkboxes with specific word when one checkbox with same is checked

I have using following code to create dynamic checkbox fields.... and storing batch unique ids as comma separated values in database for specific user...

<?php
// Fetching values from mysql database table
foreach ($result as $data){
 $batch_uid = $data['batch_uid'];
 $batch_day = $data['batch_day'];
 $batch_start_time = $data['batch_start_time'];
 $batch_end_time = $data['batch_end_time'];
?>

 <input id="batches_alloted<?php echo $batch_uid;?>" name="batches_alloted[]" type="checkbox" value="<?php echo $batch_uid;?>">&nbsp; <label id="batches_alloted_label<?php echo $batch_uid;?>" for="batches_alloted<?php echo $batch_uid;?>"> <?php echo $batch_day." ".date("H:i", strtotime($batch_start_time))." - ".date("H:i", strtotime($batch_end_time));?> </label>

<?php } ?>

With this code, I am getting checkboxes as follows :

<input id="batches_allotedQOHLPTPJH1907202409472819392142" name="batches_alloted[]" type="checkbox" value="QOHLPTPJH1907202409472819392142">&nbsp;<label id="batches_alloted_labelQOHLPTPJH1907202409472819392142" for="batches_allotedQOHLPTPJH1907202409472819392142">Monday 15:00 - 16:00</label>                    
<input id="batches_allotedWPPUFIEUM1907202409535139661945" name="batches_alloted[]" type="checkbox" value="WPPUFIEUM1907202409535139661945">&nbsp;<label id="batches_alloted_labelWPPUFIEUM1907202409535139661945" for="batches_allotedWPPUFIEUM1907202409535139661945">Monday 16:00 - 17:00</label>                    
<input id="batches_allotedLHTUUBIIL1907202411033362282145" name="batches_alloted[]" type="checkbox" value="LHTUUBIIL1907202411033362282145">&nbsp;<label id="batches_alloted_labelLHTUUBIIL1907202411033362282145" for="batches_allotedLHTUUBIIL1907202411033362282145">Monday 17:00 - 18:00</label>
<input id="batches_allotedPSFGMCELV1907202410193019248733" name="batches_alloted[]" type="checkbox" value="PSFGMCELV1907202410193019248733">&nbsp;<label id="batches_alloted_labelPSFGMCELV1907202410193019248733" for="batches_allotedPSFGMCELV1907202410193019248733">Tuesday 15:00 - 16:00</label>
<input id="batches_allotedWFONOMPTZ1907202411082492322629" name="batches_alloted[]" type="checkbox" value="WFONOMPTZ1907202411082492322629">&nbsp;<label id="batches_alloted_labelWFONOMPTZ1907202411082492322629" for="batches_allotedWFONOMPTZ1907202411082492322629">Tuesday 16:00 - 17:00</label>
<input id="batches_allotedQYTCBTUED1907202411124393971175" name="batches_alloted[]" type="checkbox" value="QYTCBTUED1907202411124393971175">&nbsp;<label id="batches_alloted_labelQYTCBTUED1907202411124393971175" for="batches_allotedQYTCBTUED1907202411124393971175">Tuesday 17:00 - 18:00</label>
<input id="batches_allotedYTBFRKLIQ1907202411242665949231" name="batches_alloted[]" type="checkbox" value="YTBFRKLIQ1907202411242665949231">&nbsp;<label id="batches_alloted_labelYTBFRKLIQ1907202411242665949231" for="batches_allotedYTBFRKLIQ1907202411242665949231">Wednesday 15:00 - 16:00</label>
<input id="batches_allotedFUOTJBSDU1907202411263977236333" name="batches_alloted[]" type="checkbox" value="FUOTJBSDU1907202411263977236333">&nbsp;<label id="batches_alloted_labelFUOTJBSDU1907202411263977236333" for="batches_allotedFUOTJBSDU1907202411263977236333">Wednesday 16:00 - 17:00</label>
<input id="batches_allotedZKLMJYAWU1907202411265942573818" name="batches_alloted[]" type="checkbox" value="ZKLMJYAWU1907202411265942573818">&nbsp;<label id="batches_alloted_labelZKLMJYAWU1907202411265942573818" for="batches_allotedZKLMJYAWU1907202411265942573818">Wednesday 17:00 - 18:00</label>
<input id="batches_allotedOWZNUOBAO1907202411280692299326" name="batches_alloted[]" type="checkbox" value="OWZNUOBAO1907202411280692299326">&nbsp;<label id="batches_alloted_labelOWZNUOBAO1907202411280692299326" for="batches_allotedOWZNUOBAO1907202411280692299326">Thursday 15:00 - 16:00</label>
<input id="batches_allotedMOLZKHPDJ1907202411282689576344" name="batches_alloted[]" type="checkbox" value="MOLZKHPDJ1907202411282689576344">&nbsp;<label id="batches_alloted_labelMOLZKHPDJ1907202411282689576344" for="batches_allotedMOLZKHPDJ1907202411282689576344">Thursday 16:00 - 17:00</label>
<input id="batches_allotedQLTGLKDIH1907202411284248122154" name="batches_alloted[]" type="checkbox" value="QLTGLKDIH1907202411284248122154">&nbsp;<label id="batches_alloted_labelQLTGLKDIH1907202411284248122154" for="batches_allotedQLTGLKDIH1907202411284248122154">Thursday 17:00 - 18:00</label>
<input id="batches_allotedGNCSRUTKA1907202412050247112598" name="batches_alloted[]" type="checkbox" value="GNCSRUTKA1907202412050247112598">&nbsp;<label id="batches_alloted_labelGNCSRUTKA1907202412050247112598" for="batches_allotedGNCSRUTKA1907202412050247112598">Friday 15:00 - 16:00</label>
<input id="batches_allotedCVWPQAIFK1907202412051523368287" name="batches_alloted[]" type="checkbox" value="CVWPQAIFK1907202412051523368287">&nbsp;<label id="batches_alloted_labelCVWPQAIFK1907202412051523368287" for="batches_allotedCVWPQAIFK1907202412051523368287">Friday 16:00 - 17:00</label>
<input id="batches_allotedDODUBZYFT1907202412053088628664" name="batches_alloted[]" type="checkbox" value="DODUBZYFT1907202412053088628664">&nbsp;<label id="batches_alloted_labelDODUBZYFT1907202412053088628664" for="batches_allotedDODUBZYFT1907202412053088628664">Friday 17:00 - 18:00</label>
<input id="batches_allotedQGSRRAKAA1907202412063285189919" name="batches_alloted[]" type="checkbox" value="QGSRRAKAA1907202412063285189919">&nbsp;<label id="batches_alloted_labelQGSRRAKAA1907202412063285189919" for="batches_allotedQGSRRAKAA1907202412063285189919">Saturday 15:00 - 16:00</label>
<input id="batches_allotedBLEQZPQYE1907202412064592615354" name="batches_alloted[]" type="checkbox" value="BLEQZPQYE1907202412064592615354">&nbsp;<label id="batches_alloted_labelBLEQZPQYE1907202412064592615354" for="batches_allotedBLEQZPQYE1907202412064592615354">Saturday 16:00 - 17:00</label>
<input id="batches_allotedWGBVZARPR1907202412065757958465" name="batches_alloted[]" type="checkbox" value="WGBVZARPR1907202412065757958465">&nbsp;<label id="batches_alloted_labelWGBVZARPR1907202412065757958465" for="batches_allotedWGBVZARPR1907202412065757958465">Saturday 17:00 - 18:00</label>

MY GOAL :

If one checkbox with label containing word Monday is checked, other checkboxes containing word Monday in label should be disabled. and same for other all days..

I tried javascript to disable other checkboxes when one chekbox is checked. But in that case, all other checkboxes getting disbaled.

I want to allocate Per Day One Batch only. So to avoid accidental checking checkboxes of other batch on same day, I am trying this...

Solution

  • If you really want to use Checkboxes, here is an example.

    $(function() {
  function uncheckSiblings(e) {
    var me = $(e.target);
    me.siblings().prop("checked", false);
  }

  $(".single-check").click(uncheckSiblings);
});
    .single-check {
  width: 240px;
}

.single-check label {
  display: inline-block;
  width: 200px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="single-check">
  <input id="batches_allotedQOHLPTPJH1907202409472819392142" name="batches_alloted[]" type="checkbox" value="QOHLPTPJH1907202409472819392142">&nbsp;<label id="batches_alloted_labelQOHLPTPJH1907202409472819392142" for="batches_allotedQOHLPTPJH1907202409472819392142">Monday 15:00 - 16:00</label>
  <input id="batches_allotedWPPUFIEUM1907202409535139661945" name="batches_alloted[]" type="checkbox" value="WPPUFIEUM1907202409535139661945">&nbsp;<label id="batches_alloted_labelWPPUFIEUM1907202409535139661945" for="batches_allotedWPPUFIEUM1907202409535139661945">Monday 16:00 - 17:00</label>
  <input id="batches_allotedLHTUUBIIL1907202411033362282145" name="batches_alloted[]" type="checkbox" value="LHTUUBIIL1907202411033362282145">&nbsp;<label id="batches_alloted_labelLHTUUBIIL1907202411033362282145" for="batches_allotedLHTUUBIIL1907202411033362282145">Monday 17:00 - 18:00</label>
</div>
<div class="single-check">
  <input id="batches_allotedPSFGMCELV1907202410193019248733" name="batches_alloted[]" type="checkbox" value="PSFGMCELV1907202410193019248733">&nbsp;<label id="batches_alloted_labelPSFGMCELV1907202410193019248733" for="batches_allotedPSFGMCELV1907202410193019248733">Tuesday 15:00 - 16:00</label>
  <input id="batches_allotedWFONOMPTZ1907202411082492322629" name="batches_alloted[]" type="checkbox" value="WFONOMPTZ1907202411082492322629">&nbsp;<label id="batches_alloted_labelWFONOMPTZ1907202411082492322629" for="batches_allotedWFONOMPTZ1907202411082492322629">Tuesday 16:00 - 17:00</label>
  <input id="batches_allotedQYTCBTUED1907202411124393971175" name="batches_alloted[]" type="checkbox" value="QYTCBTUED1907202411124393971175">&nbsp;<label id="batches_alloted_labelQYTCBTUED1907202411124393971175" for="batches_allotedQYTCBTUED1907202411124393971175">Tuesday 17:00 - 18:00</label>
</div>
<div class="single-check">
  <input id="batches_allotedYTBFRKLIQ1907202411242665949231" name="batches_alloted[]" type="checkbox" value="YTBFRKLIQ1907202411242665949231">&nbsp;<label id="batches_alloted_labelYTBFRKLIQ1907202411242665949231" for="batches_allotedYTBFRKLIQ1907202411242665949231">Wednesday 15:00 - 16:00</label>
  <input id="batches_allotedFUOTJBSDU1907202411263977236333" name="batches_alloted[]" type="checkbox" value="FUOTJBSDU1907202411263977236333">&nbsp;<label id="batches_alloted_labelFUOTJBSDU1907202411263977236333" for="batches_allotedFUOTJBSDU1907202411263977236333">Wednesday 16:00 - 17:00</label>
  <input id="batches_allotedZKLMJYAWU1907202411265942573818" name="batches_alloted[]" type="checkbox" value="ZKLMJYAWU1907202411265942573818">&nbsp;<label id="batches_alloted_labelZKLMJYAWU1907202411265942573818" for="batches_allotedZKLMJYAWU1907202411265942573818">Wednesday 17:00 - 18:00</label>
</div>
<div class="single-check">
  <input id="batches_allotedOWZNUOBAO1907202411280692299326" name="batches_alloted[]" type="checkbox" value="OWZNUOBAO1907202411280692299326">&nbsp;<label id="batches_alloted_labelOWZNUOBAO1907202411280692299326" for="batches_allotedOWZNUOBAO1907202411280692299326">Thursday 15:00 - 16:00</label>
  <input id="batches_allotedMOLZKHPDJ1907202411282689576344" name="batches_alloted[]" type="checkbox" value="MOLZKHPDJ1907202411282689576344">&nbsp;<label id="batches_alloted_labelMOLZKHPDJ1907202411282689576344" for="batches_allotedMOLZKHPDJ1907202411282689576344">Thursday 16:00 - 17:00</label>
  <input id="batches_allotedQLTGLKDIH1907202411284248122154" name="batches_alloted[]" type="checkbox" value="QLTGLKDIH1907202411284248122154">&nbsp;<label id="batches_alloted_labelQLTGLKDIH1907202411284248122154" for="batches_allotedQLTGLKDIH1907202411284248122154">Thursday 17:00 - 18:00</label>
</div>
<div class="single-check">
  <input id="batches_allotedGNCSRUTKA1907202412050247112598" name="batches_alloted[]" type="checkbox" value="GNCSRUTKA1907202412050247112598">&nbsp;<label id="batches_alloted_labelGNCSRUTKA1907202412050247112598" for="batches_allotedGNCSRUTKA1907202412050247112598">Friday 15:00 - 16:00</label>
  <input id="batches_allotedCVWPQAIFK1907202412051523368287" name="batches_alloted[]" type="checkbox" value="CVWPQAIFK1907202412051523368287">&nbsp;<label id="batches_alloted_labelCVWPQAIFK1907202412051523368287" for="batches_allotedCVWPQAIFK1907202412051523368287">Friday 16:00 - 17:00</label>
  <input id="batches_allotedDODUBZYFT1907202412053088628664" name="batches_alloted[]" type="checkbox" value="DODUBZYFT1907202412053088628664">&nbsp;<label id="batches_alloted_labelDODUBZYFT1907202412053088628664" for="batches_allotedDODUBZYFT1907202412053088628664">Friday 17:00 - 18:00</label>
</div>
<div class="single-check">
  <input id="batches_allotedQGSRRAKAA1907202412063285189919" name="batches_alloted[]" type="checkbox" value="QGSRRAKAA1907202412063285189919">&nbsp;<label id="batches_alloted_labelQGSRRAKAA1907202412063285189919" for="batches_allotedQGSRRAKAA1907202412063285189919">Saturday 15:00 - 16:00</label>
  <input id="batches_allotedBLEQZPQYE1907202412064592615354" name="batches_alloted[]" type="checkbox" value="BLEQZPQYE1907202412064592615354">&nbsp;<label id="batches_alloted_labelBLEQZPQYE1907202412064592615354" for="batches_allotedBLEQZPQYE1907202412064592615354">Saturday 16:00 - 17:00</label>
  <input id="batches_allotedWGBVZARPR1907202412065757958465" name="batches_alloted[]" type="checkbox" value="WGBVZARPR1907202412065757958465">&nbsp;<label id="batches_alloted_labelWGBVZARPR1907202412065757958465" for="batches_allotedWGBVZARPR1907202412065757958465">Saturday 17:00 - 18:00</label>
</div>

    You will still need to update your PHP to render the correct HTML. Something like this if it is a set number.

    <?php
echo "<div class='single-check'>\r\n";
$i = 1;
// Fetching values from mysql database table
foreach ($result as $data){
  $batch_uid = $data['batch_uid'];
  $batch_day = $data['batch_day'];
  $batch_start_time = $data['batch_start_time'];
  $batch_end_time = $data['batch_end_time'];
  $delim = "</div>\r\n<div class='single-click'>\r\n"
?>

 <input id="batches_alloted<?php echo $batch_uid;?>" name="batches_alloted[]" type="checkbox" value="<?php echo $batch_uid;?>">&nbsp; <label id="batches_alloted_label<?php echo $batch_uid;?>" for="batches_alloted<?php echo $batch_uid;?>"> <?php echo $batch_day." ".date("H:i", strtotime($batch_start_time))." - ".date("H:i", strtotime($batch_end_time));?> </label>

<?php 
  if($i++ % 3 == 0){
    echo @delim;
  }
}
echo "</div>\r\n"
?>