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

【问题标题】：HTML / JS: Enable disable textbox when one of two radio button checkedHTML / JS：选中两个单选按钮之一时启用禁用文本框
【发布时间】：2020-06-17 09:13:10
【问题描述】：

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

下面是我的代码：

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

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

【问题讨论】：

对于初学者来说，你的 HTML 是无效的。 ID 必须是唯一的——您的单选按钮都具有相同的 ID。此外，它们具有相同的值，这是没有意义的

标签： javascript php html jquery mysql

【解决方案1】：

单击单选按钮，您可以检查单选按钮的值，并根据该值将 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>

【讨论】：