在 JavaScript 中选中单选按钮时如何禁用输入文本？

Question

This is in my signup form wherein when I check one of the radio buttons, the input type text with placeholder 'Specify' should be disabled. Unless if I check the radio button 'Others'. This is to specify the position of the registrant.

<label for="position"><b>Position:</b></label><br/><br/>
<input type="radio" name="position" id="r1" value="Dean" />Dean
<input type="radio" name="position" id="r2" value="Instructor"/>Instructor
<input type="radio" name="position" id="r3" value="Student"/>Student<br/><br/>
<input type="radio" name="position" id ="r4" value="<?php echo $_POST['otherPosition']?>"/>
Others: 
<input type="text"  value = "<?php if($error==TRUE){echo $_POST['otherPosition'];}?>" id="otherPosition" placeholder="Specify" name="position"/>

Here's my Javascript

<script>    
    if(document.getElementById('r1').checked||document.getElementById('r2').checked||document.getElementById('r3').checked){
        document.getElementById('otherPosition').readOnly = true;
    }else{
        document.getElementById('otherPosition').readOnly = false;
    }
</script>

Answer 1

Using onclick Function in HTML & Javascript

Method-1 : using PHP value

HTML

<label for="position"><b>Position:</b></label><br/><br/>
<input type="radio" name="position" id="r1" value="Dean" onclick="Checkradiobutton()"/>Dean
<input type="radio" name="position" id="r2" value="Instructor" onclick="Checkradiobutton()"/>Instructor
<input type="radio" name="position" id="r3" value="Student" onclick="Checkradiobutton()"/>Student<br/><br/>
<input type="radio" name="position" id ="r4" value="<?php echo $_POST['otherPosition']?>" onclick="Checkradiobutton()"/>
Others: 
<input type="text"  value = "<?php if($error==TRUE){echo $_POST['otherPosition'];}?>" id="otherPosition" placeholder="Specify" name="position" />

Script

 function Checkradiobutton()
 {

  if(document.getElementById('r1').checked || document.getElementById('r2').checked || document.getElementById('r3').checked)
 {

        document.getElementById('otherPosition').disabled=true; 
   }else{
                    document.getElementById('otherPosition').disabled = false;
                }
 }

Snippet Example below

 function Checkradiobutton() { if(document.getElementById('r1').checked || document.getElementById('r2').checked || document.getElementById('r3').checked) { document.getElementById('otherPosition').disabled=true; }else{ document.getElementById('otherPosition').disabled = false; } }

 <label for="position"><b>Position:</b></label><br/><br/> <input type="radio" name="position" id="r1" value="Dean" onclick="Checkradiobutton()"/>Dean <input type="radio" name="position" id="r2" value="Instructor" onclick="Checkradiobutton()"/>Instructor <input type="radio" name="position" id="r3" value="Student" onclick="Checkradiobutton()"/>Student<br/><br/> <input type="radio" name="position" id ="r4" value="<?php echo $_POST['otherPosition']?>" onclick="Checkradiobutton()"/> Others: <input type="text" value = "<?php if($error==TRUE){echo $_POST['otherPosition'];}?>" id="otherPosition" placeholder="Specify" name="position" />

Method-2 : Direct HTML value

This Example Remove your PHP value and set custom value only understand purpose.

 function Checkradiobutton() { if(document.getElementById('r1').checked || document.getElementById('r2').checked || document.getElementById('r3').checked) { document.getElementById('otherPosition').disabled=true; }else{ document.getElementById('otherPosition').disabled = false; } }

 <label for="position"><b>Position:</b></label><br/><br/> <input type="radio" name="position" id="r1" value="Dean" onclick="Checkradiobutton()"/>Dean <input type="radio" name="position" id="r2" value="Instructor" onclick="Checkradiobutton()"/>Instructor <input type="radio" name="position" id="r3" value="Student" onclick="Checkradiobutton()"/>Student<br/><br/> <input type="radio" name="position" id ="r4" value="Other" onclick="Checkradiobutton()"/> Others: <input type="text" value = "OtherPoistion" id="otherPosition" placeholder="Specify" name="position" />