Question

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

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

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

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

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

Answer 1

检查以下方法。你必须给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>

Fiddle

Answer 2

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

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

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

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

3 个答案: