Question

我的HTML代码

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>

在我的jQuery中，如果用户选中了Khas，则下拉列表将被禁用。这样可行。但是如果用户选择khas，那么问题是总线，下拉列表将保持禁用状态，这是错误的！

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

我需要该列表在用户选择“总线”时显示，而在他选择“ Khas”时消失。我该如何解决？

Answer 1

$(function() {

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

Answer 2

您可以尝试：-

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

使用JQuery启用和禁用下拉列表的问题

2 个答案: