включить / отключить поле выбора на основе выбора метки (радио)

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 для каждой метки радио.Вам нужен уникальный идентификатор для каждого из них или вместо этого использовать класс .- DanielG

Как упоминал Даниэль, я использовал класс вместо идентификатора od, и он работает сейчас.

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);
        }


    });