![](/img/trans.png)
[英]Javascript: How do I make an input/text field mandatory(required) when the radio button assigned to it is checked/selected?
[英]How to disable input text while the radio button is checked in JavaScript?
这是在我的注册表单中,当我选中其中一个单选按钮时,应禁用带有占位符“指定”的输入类型文本。 除非我选中单选按钮“其他”。 这是为了指定注册人的位置。
<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>
在 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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.