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

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>