PHP循环生成数据库疾病复选框无法选中问题求助

从数据库获取疾病信息，通过PHP while循环生成带复选框的选项，但所有复选框都无法被选中。相关代码如下：

<li class="form-line" data-type="control_checkbox" id="id_5">
        <label class="form-label form-label-top form-label-auto" id="label_5" for="input_5"> Do you have any of the followings? (select all that apply) </label>
        <div id="cid_5" class="form-input-wide" data-layout="full">
          <div class="form-single-column" role="group" aria-labelledby="label_5" data-component="checkbox">
            
   <?php 
// Create connection
$conn = mysqli_connect("localhost", "root", "", "covidtmsdb");
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
   
$sql7 = "SELECT * FROM tblhealth_issues WHERE Category='disease'";
$result7 = mysqli_query($conn, $sql7);

if (mysqli_num_rows($result7) > 0) {
    // output data of each row
    while($row7 = mysqli_fetch_assoc($result7)) {
                
                ?>
<span class="form-checkbox-item" style="clear:left">
              <span class="dragger-item">
              </span>
             <input type="checkbox" aria-describedby="label_5" class="form-checkbox" id="<?php  echo $row7['Question'];?>" name="ques[]" value="<?php  echo $row7['Symptoms'];?>" />
              <label id="label_input_5_0" for="input_5_0"> <?php  echo $row7['Symptoms'];?></label>
            </span>
        <?php             
    }
} else {
    echo "0 results for Q7";
}

mysqli_close($conn);
?>     
          </div>
        </div>
      </li>

问题现象 #

复选框显示正常，但点击后无选中状态变化。

原因分析 #

• 所有<label>标签的for属性固定为input_5_0，但每个<input>的id来自数据库Question字段，两者不匹配，导致点击标签无法触发复选框选中，浏览器交互绑定失效。
• 多个<label>使用相同的id="label_input_5_0"，违反HTML唯一ID规范，可能引发渲染异常。
• 空的.dragger-item标签可能遮挡复选框，导致无法点击。

解决方案 #

1. 为每个复选框生成唯一id，建议用计数器或数据库主键避免重复。
2. 让<label>的for属性与对应<input>的id完全匹配，同时给每个<label>设置唯一id。
3. 调整.dragger-item样式或移除，避免遮挡复选框点击区域。

修改后的代码 #

<li class="form-line" data-type="control_checkbox" id="id_5">
    <label class="form-label form-label-top form-label-auto" id="label_5" for="input_5"> Do you have any of the followings? (select all that apply) </label>
    <div id="cid_5" class="form-input-wide" data-layout="full">
        <div class="form-single-column" role="group" aria-labelledby="label_5" data-component="checkbox">
            
            <?php 
            // 创建数据库连接
            $conn = mysqli_connect("localhost", "root", "", "covidtmsdb");
            // 检查连接
            if (!$conn) {
                die("Connection failed: " . mysqli_connect_error());
            }
            
            $sql7 = "SELECT * FROM tblhealth_issues WHERE Category='disease'";
            $result7 = mysqli_query($conn, $sql7);

            if (mysqli_num_rows($result7) > 0) {
                $counter = 0;
                // 循环输出每条数据
                while($row7 = mysqli_fetch_assoc($result7)) {
                    $inputId = "input_5_" . $counter;
                    $labelId = "label_" . $inputId;
                    ?>
                    <span class="form-checkbox-item" style="clear:left">
                        <!-- 若无需拖拽功能可直接移除该标签，或添加样式避免遮挡点击 -->
                        <span class="dragger-item" style="pointer-events:none;"></span>
                        <input type="checkbox" aria-describedby="label_5" class="form-checkbox" id="<?php echo $inputId;?>" name="ques[]" value="<?php echo $row7['Symptoms'];?>" />
                        <label id="<?php echo $labelId;?>" for="<?php echo $inputId;?>"> <?php echo $row7['Symptoms'];?></label>
                    </span>
                    <?php
                    $counter++;
                }
            } else {
                echo "0 results for Q7";
            }

            mysqli_close($conn);
            ?>     
        </div>
    </div>
</li>

修改说明 #

• 新增计数器$counter，为每个复选框生成唯一id，确保input与label的标识一一对应。
• 给.dragger-item添加pointer-events:none样式，避免其遮挡复选框的点击区域（无需拖拽功能可直接移除该标签）。
• 修复label的for属性绑定逻辑，恢复复选框的点击交互功能。

内容的提问来源于stack exchange，提问作者Irfani Fuard