具有禁用和启用输入功能的单选按钮

Question

HTML ：这里我有一个单选按钮和一个输入

<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="yucho" value="Yucho"> ゆうちょ
    </label>
</div>
<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="UFJ" value="UFJ"> UFJ
    </label>
</div>
<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="Mizuho" value="Mizuho"> みずほ
    </label>
</div>
<div class="form-check form-check-inline">
    <div class="input-group">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="Other" value="Other">Other
        </label>
    <input type="text" class="form-control" id="unique" aria-label="Text input with radio button" disabled>
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-success">Add</button>
        <button type="button" class="btn btn-success">Remove</button>
    </div>
</div>

Jquery ：我希望单选按钮具有以下功能：单击时启用输入，单击其他半径按钮时禁用

<script>
    $(document).ready(function () {
        $("#Other").click(function () {
            $("#unique").prop("disabled", false);
        });
    });
</script>

它不起作用，我应该改变什么？

Answer 1

我猜您想禁用单选按钮以避免重复单击。

 $(document).ready(function() { var allOptions = $('input[name=inlineRadioOptions]') allOptions.click(function() { $("#unique").prop("disabled", false); allOptions.prop('disabled', true); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="Other" value="Other">Other </label> <label class="form-check-label"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="Other2" value="Other2">Other2 </label> <input type="text" class="form-control" id="unique" aria-label="Text input with radio button" disabled>

Answer 2

您必须使用checkbox而不是radio

<input class="form-check-input" type="checkbox" name="inlineRadioOptions" id="Other" value="Other">Other

那么剧本是——

$(document).ready(function () {
   $("#Other").click(function () {
       if($(this).prop('checked') == true){
           $("#unique").prop("disabled", true);
       } else {
           $("#unique").prop("disabled", false);
       }
   });
 });