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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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);
       }
   });
 });

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

2 个答案: