CODEWITHSUNDEEP
javascriptjqueryhtml
Hoàng Việt
Hoàng Việt

Reputation: 174

Radio button with function Disable and Enable input

HTML: Here I have a radio button and an input

<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: I want the radio button have a function that: Enable the input when clicked and Disable when clicked the other radius button

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

It's not working , what should I change ?

Upvotes: 2

Views: 3981

Answers (2)

Janen R
Janen R

Reputation: 749

You have to use checkbox not radio

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

Then the script is -

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

Upvotes: 0

Amit Bhagat
Amit Bhagat

Reputation: 4300

I guess you want to disable radio button to avoid repeat clicked.

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

Upvotes: 3

Related Questions