HTML / JS：选中两个单选按钮之一时启用禁用文本框

Question

关于我上面的问题，我有两个单选按钮，单选按钮 1 有下拉列表，单选按钮 2 有文本框。 如果选中单选按钮 1，下拉列表将启用，文本框将被禁用。 选择单选按钮 2 时也是如此，文本框将启用，下拉菜单将禁用。 下面是照片：

下面是我的代码：

记录.php

<?php

    $smt = $conn->prepare("SELECT * FROM ets_team WHERE status = 1 AND (team_id != 1 AND team_id !=2) ORDER BY team_name ASC");
    $smt->execute();
    $results = $smt->fetchAll();

?>   

<div class="form-group row">
    <div class="col-xs-3">
        <div class="radio">
        <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        Team:
        </label>
        </div>
    </div>
    <div class="col-xs-9">
        <fieldset class="form-group">
        <select class="form-control" id="exampleSelect1" name = "team_id">
            <option value="">Please select...</option>
            <?php foreach ($results as $row2): ?>
            <option value= <?php echo $row2["team_id"]; ?>><?php echo strtoupper($row2["team_name"]); ?></option>
            <?php endforeach ?>
        </select>
        </fieldset>
    </div>
    </div>
    <div class="form-group row">
    <div class="col-xs-3">
        <div class="radio">
        <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        Tools:
        </label>
        </div>
    </div>
    <div class="col-xs-9">
        <fieldset class="form-group">
        <input class="form-control" type="text" name="tools_name" required>
        </fieldset>
    </div>
</div>

有人可以帮我解决这个问题吗？ 非常感谢。

Answer 1

单选按钮的 Onclick 您可以检查单选按钮的值，并根据该值将prop(disabled,true)或prop(disabled,false)添加到 html 元素

演示代码：

 $("input:radio").click(function() { //getting option clicked value if($(this).val() == "option1") { //set select box enable $("#exampleSelect1").prop('disabled', false); //disable textbox $("input[name=tools_name]").prop('disabled', true); } else { $("#exampleSelect1").prop('disabled', true); $("input[name=tools_name]").prop('disabled', false); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <div class="col-xs-3"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"checked="" > Team: </label> </div> </div> <div class="col-xs-9"> <fieldset class="form-group"> <select class="form-control" id="exampleSelect1" name = "team_id"> <option value="">Please select...</option> <?php foreach ($results as $row2): ?> <option value= <?php echo $row2["team_id"]; ?>><?php echo strtoupper($row2["team_name"]); ?></option> <?php endforeach?> </select> </fieldset> </div> </div> <div class="form-group row"> <div class="col-xs-3"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" > Tools: </label> </div> </div> <div class="col-xs-9"> <fieldset class="form-group"> <input class="form-control" type="text" name="tools_name" required disabled> </fieldset> </div> </div>