根据标签(单选)选择启用/禁用选择字段

Question

我正在尝试禁用和启用基于 pdo 查询生成的无线电输入标签的选择字段，但无法正确执行此操作。

选择字段确实被 prop('disabled'， true) 禁用，但返回启用不起作用。(代码注释块中的标签列表示例)

我已经尝试了各种方法，onClick，onChange等，但这些方法似乎都没有按预期工作。我也在这里搜索了关于这个问题的各种主题，但所有这些主题显然都在使用无线电输入本身和具体的选项。例如，我之前咨询的这个线程

启用/禁用在 jquery 中选择单选按钮的按钮

我的情况是，我有一个带有动态标签的不确定无线电输入字段，所以我不能使用具体的比较，如if (val = this || val = that)

请参考下面的代码和我预期的解决方案

<form name='enter_slip_data' action='submitPatData.php' method='post' class='needs-validation' novalidate>
<div class='form-group'>
<select name='doctor_name' id='doctor_name_id' class='custom-select' required>
<option selected disabled value=''>Select Doctor</option>
<!-- function below will print options of doctor names fetched from database -->
<?php echo getDocNameList(); ?>
</select>
</div>
<div class='form-group'>
<input type='text' name='patient_name' class='form-control' placeholder='Enter Patient Name' required/>
</div>
<div class='form-group'>
<input type='text' name='patient_telephone' class='form-control' placeholder='Enter Patient Telephone' required/>
</div>
<div class='form-group'>
<input type='text' name='patient_address' class='form-control' placeholder='Enter Patient Address' required/>
</div>
<div class='form-group'>
<input type='text' name='patient_age' class='form-control' placeholder='Enter Patient Age' required/>
</div>
<div class='form-group'>
<select name='patient_gender' class='custom-select' required>
<option selected disabled>Select Gender</option>
<option  value='male'>Male</option>
<option  value='female'>FeMale</option>
</select>
</div>
<div class='form-group'>
<div class='btn-group btn-group-toggle' style='flex-flow: row wrap;border-radius:5px;overflow:hidden;' data-toggle='buttons'>
<?php
/* function below will fetch records from database and print labels with radio inputs
These inputs could be of any number with at least one of them named 'Drip Case'
i-e-
------------------------------------------------------
| Drip Case | Histatmy | Sk. Stitch | LSCS | ND & DNC |
------------------------------------------------------
Clicking on drip case disables the above select box
Clicking on any other label should enable it back
*/
function getOperationList(){
global $db;
$getOPType = $db->prepare("SELECT * from operation_types");
$getOPType->execute();
$opType = '';
if($getOPType->rowCount() > 0){
while($showOpTypes = $getOPType->fetch(PDO::FETCH_ASSOC)){
$opType .=  "<label id='opType_label'class='btn btn-secondary success' style='border-radius:0;'>";
$opType .= "<input type='radio' id='op_type' name='op_type' value='".$showOpTypes['id']."' autocomplete='off'>" . $showOpTypes['name'];
$opType .= "</label>";
}
return $opType;
}
}
?>
</div>
</div>
<div class='form-group'>
<input type='text' name='patient_fee' class='form-control' placeholder='Enter Fees' required/>
</div>
<div class='form-group'>
<input type='hidden' name='dept' id='dept' value='Operation' />
<input type='hidden' name='test_type' value='2' />
<button type='button' class='btn btn-secondary' disabled><?php echo getReciptNo(); ?></button>
<button type='submit' name='submitPatData' class='btn btn-secondary' value='Print Recipt'>Print Recipt</button>
<button type='button' class='btn btn-danger' data-dismiss='modal'>Cancel</button>
</div>
</form>

我现在尝试使用的jQuery代码是

$('#opType_label').click(function(){
if($(this).text() == 'Drip Case'){
$('#doctor_name_id').prop("selectedIndex", 0);
$('#doctor_name_id').prop("disabled", true);
} else {
$('#doctor_name_id').prop("disabled",false);
}

});

使用上面的代码，我可以在单击标签时禁用选择框Drip-Case但是当我单击任何其他标签时，它不会重新启用，这是我的预期结果

Answer 1

我看到的最大问题是你对每个无线电标签都使用 #opType_label ID。您需要为每个类提供一个唯一的 ID，或者改用一个类。

正如丹尼尔所提到的，我使用了类而不是od ID，它现在可以工作了。

while($showOpTypes = $getOPType->fetch(PDO::FETCH_ASSOC)){
$opType .=  "<label id='opType_label'class='btn btn-secondary success opType' style='border-radius:0;'>";
$opType .= "<input type='radio' id='op_type' name='op_type' value='".$showOpTypes['id']."' autocomplete='off'>" . $showOpTypes['name'];
$opType .= "</label>";
}

$('.opType').click(function(){
if($(this).text() == 'Drip Case'){
$('#doctor_name_id').prop("selectedIndex", 0);
$('#doctor_name_id').prop("disabled", true);
} else {
$('#doctor_name_id').prop("disabled",false);
}

});