enable/ disable select field based on label (radio) selection

Question

I am trying to disable and enable a select field based on pdo-query generated radio input labels but have not been able to do it correctly.

The select field does gets disabled with prop('disabled', true) but turning back to enabled is not working. (example label list in comment block in code)

I have tried with various methods, onClick, onChange etc but none of those seems to be working as expected. I have also searched various topics here about this question but all of those are apparently working with radio inputs themselves with concrete options.One for example is this thread which i consulted earlier

Enable/Disable a button on select of radio button in jquery

My case is that I have a field of uncertain radio inputs with dynamic labels so i cannot use concrete comparisons like if (val = this || val = that)

Please refer to the below code and my expected solution

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

The jQuery code I am trying to use for now is

    $('#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);
        }


    });

Using the code above, I am able to disable the select box when clicked on Drip-Case label but it does not gets enabled back when I click on any other label which is my expected result

Oh, and there's a whole other thing you need to do to get the value of a select... https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown — Stevish, Apr 16 '19 at 20:43
Also possible that since the html is dynamically generated jquery is having trouble finding it in the dom. try `$(document).on('click', '#opType_label' function() {//your code here}); ` — bos570, Apr 16 '19 at 20:46
The biggest issue I see is that you're using the #opType_label ID for every radio label. You need a unique ID for each one or to use a class instead. — Daniel G, Apr 16 '19 at 20:46
@DanielG Oh my good God, how could I be so blind to not notice this silly mistake. Changed it to use class instead of ID and suddenly everything is working perfect with the same above mentioned jQuery — Muneeb aslam, Apr 16 '19 at 20:55

score 0 · Answer 1 · answered Apr 17 '19 at 06:57

The biggest issue I see is that you're using the #opType_label ID for every radio label. You need a unique ID for each one or to use a class instead.- DanielG

As Daniel mentioned, i used the class instead od ID and it works now.

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


    });

enable/ disable select field based on label (radio) selection

1 Answers1