当点击第一个文本框's单选按钮时，第二个文本框应该处于非活动状态

Second text field should be inactive while clicking on 1st text field's radio button

本文关键字：文本 第二个 活动状态 于非 第一个 单选按钮      更新时间：2023-09-26

我有两个带有单选按钮的文本域。

当我点击第一个按钮，文本字段应该是活动的，其他文本字段应该是不活动的

但是，当我点击第二个按钮时，两个文本字段都处于活动模式。

我只需要一个字段应该在点击按钮时激活，其他应该在非活动模式

这里有HTML代码

<form  name="myform" action="">
    <input type="radio" id="yourBox" value="text1" style="margin-left: 15px; margin-right: 5px;" />
    <input type="text"  `enter code here`id="yourText" disabled="disabled" style="margin-left: 15px; width: 349px;" />
    <input type="radio" id="yourBox1" value="text2" style="margin-left: 30px;margin-right: 5px;" />
    <input type="text" id="id2" disabled="disabled" style="margin-left: 15px; width: 352px;" />
</form>

Αnd my JavaScript code:

<script>
    document.getElementById('yourBox').onchange = function()  {
        document.getElementById('yourText').disabled = !this.checked;
    };
    document.getElementById('yourBox1').onchange = function() {
        document.getElementById('id2').disabled = !this.checked;
    };
</script>

首先，您的代码中有错别字。其次，您应该改进代码以提高效率，但这超出了您所要求的范围。这是一个从你的原始帖子修改的工作代码:

<form  name="myform" action="">
    <input type="radio" id="yourBox" value="text1" style="margin-left: 15px; margin-right: 5px;" />
    <input type="text" value="enter code here" id="yourText" disabled="disabled" style="margin-left: 15px; width: 349px;" /><br/>
    <input type="radio" id="yourBox1" value="text2" style="margin-left: 30px;margin-right: 5px;" />
    <input type="text" id="id2" disabled="disabled" style="margin-left: 15px; width: 352px;" />
</form>
<script>
    var yourBox = document.getElementById('yourBox');
    var yourBox1 = document.getElementById('yourBox1');
    yourBox.onchange = function()  {
       yourBox1.checked = !this.checked;
       document.getElementById('yourText').disabled = !this.checked;
       document.getElementById('id2').disabled = this.checked;
    };
    yourBox1.onchange = function() {
        yourBox.checked = !this.checked;
        document.getElementById('id2').disabled = !this.checked;
        document.getElementById('yourText').disabled = this.checked;
    };
</script>

这是一个JSFiddle: http://jsfiddle.net/swfh0qo5/

检查以下方法。你必须给输入单选按钮name属性，所以如果一个选择，那么另一个被取消选择。

HTML: 

<input type="radio" id="yourBox" name="test" value="text1" style="margin-left: 15px; margin-right: 5px;" />
<input type="radio" id="yourBox1" name="test" value="text2" style="margin-left: 30px;margin-right: 5px;" />

JS: 

<script>
    document.getElementById('yourBox').onchange = function()  {
        document.getElementById('yourText').disabled = !this.checked;
        document.getElementById('id2').disabled = this.checked;
    };
    document.getElementById('yourBox1').onchange = function() {
        document.getElementById('id2').disabled = !this.checked;
        document.getElementById('yourText').disabled = this.checked;
    };
</script>

小提琴

尝试使用Jquery

$("#c1").on("change", function() {
  if ($("#c1:checked").length > 0) {
    $("#t1").removeAttr("disabled");
    $("#t2").attr("disabled", true);
  } else {
    $("#t1").attr("disabled", true);
  }
})
$("#c2").on("change", function() {
  if ($("#c2:checked").length > 0) {
    $("#t2").removeAttr("disabled");
    $("#t1").attr("disabled", true);
  } else {
    $("#t2").attr("disabled", true);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="c1">button1</input>
<input type="checkbox" id="c2" text="button2">button2</input>
<input type="text" id="t1" disabled placeholder="text1" />
<input type="text" id="t2" disabled placeholder="text2" />

相关文章：