CODEWITHSUNDEEP
javascripthtmljquery
Sercan Aslan
Sercan Aslan

Reputation: 273

Enable/disable text input when a different radio input is clicked

I have two input radio and one input. I want to disable the text input if click radio button value is exam-two and enable it if exam-one value is selected. How can I do this?

$(document).ready(function(){
    $('input[name="tekcift-yon"]').click(function(){
        $('.attr-sys').attr('disable').siblings().attr('disable');       
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="exam" value="exam-one" /> Exam one</label>
<label><input type="radio" name="exam" value="exam-two" /> Exam two</label>

<input type="text" class="attr-sys" value="exam to click disable this input" />

Upvotes: 1

Views: 1207

Answers (2)

terrymorse
terrymorse

Reputation: 7096

So when "exam-two" radio input is clicked, you want the disabled attribute of the "attr-sys" input set?

Okay.

let input = document.querySelector('.attr-sys');
function clickExamTwo() {
  input.disabled = true;
}

function clickExamOne() {
  input.disabled = false;
}
<label><input type="radio" name="exam" value="exam-one"
  onclick="clickExamOne();"/> Exam one</label>
<label><input type="radio" name="exam" value="exam-two"
  onclick="clickExamTwo();"/> Exam two</label>

<input type="text" class="attr-sys" value="exam to click disable this input" />

Upvotes: 2

ROOT
ROOT

Reputation: 11622

You can achieve this by attaching event listener to change event on radio buttons, check for the value and based on condition add disabled prop to input, here is a working snippet:

$(document).ready(function(){
    $('input[name="exam"]').on('change', function(){
       if($(this).val() === 'exam-two') {
         $('.attr-sys').prop('disabled', true);  
       }
       else {
         $('.attr-sys').prop('disabled', false);  
       }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="exam" value="exam-one" /> Exam one</label>
<label><input type="radio" name="exam" value="exam-two" /> Exam two</label>

<input type="text" class="attr-sys" value="exam to click disable this input" />

Upvotes: 1

Related Questions