单击第一个文本字段的单选按钮时，第二个文本字段应处于非活动状态答案

【问题标题】：Second text field should be inactive while clicking on 1st text field's radio button单击第一个文本字段的单选按钮时，第二个文本字段应处于非活动状态
【发布时间】：2015-05-30 20:02:02
【问题描述】：

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

当我点击第一个按钮时，文本字段应该处于活动状态，而其他文本字段应该处于非活动状态。

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

我只需要一个字段在单击按钮时应处于活动状态，而其他字段应处于非活动模式。

我有这个 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>

和我的 JavaScript 代码：

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

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

【问题讨论】：

先生，当我点击第一个按钮时，文本字段处于活动状态，其他字段处于非活动状态，但是当我点击第二个按钮时，两个字段都处于活动状态。当我点击第二个时，我不需要在活动模式下成为第一个

标签： javascript html

【解决方案1】：

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

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

【讨论】：

太棒了！如果它解决了问题，请选择作为答案。谢谢。

【解决方案2】：

检查以下方法可以做到这一点。您必须为输入单选按钮提供名称属性所以如果一个选择然后另一个被取消选择。

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>

Fiddle

【讨论】：

【解决方案3】：

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

【讨论】：