Problem with enable and disable a dropdownlist using JQuery

Question

My HTML code

Transportation:
<input type="radio" name="transportation" value="BUS">  Bus </option><br>
<input type="radio" name="transportation" id="khaschkbox" value="KHAS">Khas</option><br>

Bus:
<select id="busDropdown" name="bus">
      <option value="Null"> NA </option>
    <?php
    $sql = "SELECT busNumber FROM Bus";
    $result = $conn->query($sql);
    $row_count = $result->rowCount();
    if ($row_count > 0){
    while ($row = $result->fetch())
      {
        echo "<option value=".$row['busNumber'].">".$row['busNumber']."</option>";
      }
    }
    ?>
    </select><br><br>

in my jQuery, if the user checked Khas, the dropdown list will be disabled. that works. but the problem if the user chose khas then Bus the dropdownlist will remain disabled which is wrong!

JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$(function() {
          $("#khaschkbox").change(function(){
            if(this.checked){
              $("#busDropdown").prop("disabled",true);
            } else {
              $("#busDropdown").prop("disabled",false);
            }
            });
        });

I need the list to appear when the user choose Bus and disappear if he chose Khas. How can I fix that?

Kunal Virk · Accepted Answer · 2018-12-16 18:25:47Z

1

You may try this : -

$(function() {
      $('[name="transportation"]').click(function(){
        if(this.value !== 'BUS'){
          $("#busDropdown").prop("disabled",true);
        } else {
          $("#busDropdown").prop("disabled",false);
        }
      });
    });

answered Dec 16, 2018 at 18:25

Kunal Virk

1715 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kunal Virk Over a year ago

Well, yes, the change event is only fine with select tag, so you need to target the radio group to see what is selected....Cheers!!!

Sosy Over a year ago

I see now, Thanks again!

Guruling Kumbhar · Accepted Answer · 2018-12-16 18:36:59Z

1

$(function() {

var khaschkbox = $('#khaschkbox');
          $('input[name="transportation"]').change(function(){
            if(khaschkbox.is( ":checked" )){
              $("#busDropdown").attr("disabled","disabled");
            } else
              $("#busDropdown").removeAttr("disabled");
            }
            });
        });

edited Dec 16, 2018 at 18:36

answered Dec 16, 2018 at 18:18

Guruling Kumbhar

1,0491 gold badge8 silver badges19 bronze badges

2 Comments

Sosy Over a year ago

Still the same problem :( could that be from my included library? <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.3/…>

Sosy Over a year ago

great. Thank you!

Collectives™ on Stack Overflow

Problem with enable and disable a dropdownlist using JQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related