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

【问题标题】：How to disable input text while the radio button is checked in JavaScript?在 JavaScript 中选中单选按钮时如何禁用输入文本？
【发布时间】：2017-02-04 13:13:08
【问题描述】：

这是在我的注册表单中，当我选中其中一个单选按钮时，应禁用带有占位符“指定”的输入类型文本。除非我选中单选按钮“其他”。这是为了指定注册人的位置。

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

这是我的 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>

【问题讨论】：

Disable textbox on radio button click、Disable TextBox by checked Radio Button? 可能重复
您的代码将在页面加载时运行一次，而不是响应用户单击收音机。（另外，顺便说一句，“禁用”和“只读”不是一回事。）
多个重复/相关问题可以通过Googling the title of this question找到。还有一次，最好尝试搜索您用于问题的标题（或关键字），看看是否有可用的资源可以为您提供答案。这样做通常可以比花精力写出问题更快地找到解决方案。

标签： javascript html css

【解决方案1】：

在 HTML 和 Javascript 中使用 onclick 函数

方法一：使用 PHP 值

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

脚本

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

以下片段示例

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

方法 2：直接 HTML 值

此示例删除您的 PHP 值并设置自定义值仅了解目的。

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

【讨论】：