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

Щелчком переключателя вы можете проверить значение переключателя и, в зависимости от этого, добавить 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>