当选中一个具有相同单词的复选框时，禁用具有特定单词的其他复选框

Question

我使用以下代码创建动态复选框字段...并将批次唯一 ID 作为逗号分隔值存储在数据库中为特定用户...

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

使用此代码，我得到如下复选框：

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

我的目标：

如果选中一个标签包含单词Monday的复选框，则应禁用标签中包含单词Monday的其他复选框。其他所有日子都一样..

我尝试用 JavaScript 在选中一个复选框时禁用其他复选框。但在这种情况下，所有其他复选框都会被取消。

我只想分配每天一批。因此，为了避免在同一天意外检查其他批次的复选框，我正在尝试这个...

Answer 1

如果您确实想使用复选框，这里有一个示例。

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

您仍然需要更新 PHP 才能呈现正确的 HTML。如果是固定数字的话，就像这样。

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