根据单选按钮选择启用文本字段

Question

基本上，我有两个单选按钮“是”和“否”，然后还有两个输入字段。

[LabelQuestion] [RadioYes][RadioNo]

If yes, then... [TextField1]
If no, then...  [TextField2]

默认情况下，我希望文本字段1和2处于非活动状态/在选择相关的单选按钮之前不能输入数据，然后该字段仅可用于数据输入。

我是一个新手，但我想这可以通过使用CSS和/或JavaScript来实现。 请记住，我接下来将了解JavaScript的知识，但是可以从逻辑上更改预先存在的JS代码。

我当前的代码如下所示：

 <div class='conlabel'>Have you started trading yet?</div>
      <table width="100">
              <tr>
                <td><label>
                  <input type="radio" name="example" value="Yes" id="example_0" required/>
                  Yes</label></td>
          </tr>
          <tr>
            <td><label>
              <input type="radio" name="example" value="No" id="example_1" required/>
              No</label></td>
          </tr>
  </table>
  <li>
      <div class='conlabel'>If Yes, then:</div>
          <input type="text" name="field1" placeholder="" />
  </li><br>
      <div class='conlabel'>If No, then:</div>
          <input type="text" name="field2" placeholder="" />
  </li><br>

Answer 1

这个小数字怎么样：

$(function(){
    $("#example_0, #example_1").change(function(){
        $("#field1, #field2").val("").attr("readonly",true);
        if($("#example_0").is(":checked")){
            $("#field1").removeAttr("readonly");
            $("#field1").focus();
        }
        else if($("#example_1").is(":checked")){
            $("#field2").removeAttr("readonly");
            $("#field2").focus();   
        }
    });
});

您将在这里找到JSFiddle 。

请注意，我已经在两个<input>字段中添加了一个ID。 让我知道如何公平。

如果您希望disabled <input>字段而不是readonly ，则只需在各处将readonly替换为disabled 。 我个人认为readonly更好，因为操作系统似乎会对禁用的输入产生更多的影响。

当然， focus()并不是必须的-但是，小事情会产生很大的不同，当网站将光标移到对我来说应该是的位置时，我总是更喜欢它。

Answer 2

将此javascript / jQuery添加到您的html中，这应该可以解决问题：

<script type="text/javascript">
    $(function () {
        // First add disabled properties to inputs
        $("input:text").prop('disabled', true);

        // Yes Input
        $("#example_0").on("click", function () {
            $("#input1").prop('disabled', false);
            $("#input2").prop('disabled', true);
        });

        // No Input
        $("#example_1").on("click", function () {
            $("#input2").prop('disabled', false);
            $("#input1").prop('disabled', true);
        });
    });
</script>

非常基本，只需向每个输入添加onclick函数，然后为相关文本输入启用或禁用'disabled'属性。 您将需要在文本输入中添加“＃input1”和“＃input2” ID，显然可以根据需要进行命名。

Answer 3

您可以使用http://jquery.com/来执行此操作：

在您的html头中添加以下内容：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

并添加此javascript：

    <script type="text/javascript">
$(document).ready(function () {

function checkradiobox(){
    var radio = $("input[name='example']:checked").val();
    $('#field1, #field2').attr('disabled',true);
    if(radio == "Yes"){
        $('#field1').attr('disabled',false);
        $("#field1").focus();
    }else if(radio == "No"){
        $('#field2').attr('disabled',false);
        $("#field2").focus();
    }
}

$("#example_0, #example_1").change(function () {
    checkradiobox();
});

checkradiobox();

});   
</script>

检查jsfiddle以获取工作示例http://jsfiddle.net/KFgbg/3/

Answer 4

<div class='conlabel'>Have you started trading yet?</div>
  <table width="100">
          <tr>
            <td><label>
              <input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/>
              Yes</label></td>
      </tr>
      <tr>
        <td><label>
          <input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/>
          No</label></td>
      </tr>
</table>
<li>
  <div class='conlabel'>If Yes, then:</div>
      <input type="text" id="field1" name="field1" placeholder="" disabled="true" />
</li><br>
  <div class='conlabel'>If No, then:</div>
      <input type="text" id="field2" name="field2" placeholder="" disabled="true"  />

有很多方法可以做到这一点，但是要尽可能少地编辑代码，这是一种方法：

1. 提供您的文本框ID属性和名称
2. 通过html属性禁用两个文本框以启动
3. 单击“是”单选按钮，启用field1和禁用field2
4. 单击“否”单选按钮，禁用field1并启用field2

Answer 5

<script language="Javascript">


function hideA()


{

    document.getElementById("A").style.visibility="hidden";

    document.getElementById("B").style.visibility="visible";    

}



function hideB()
{
    document.getElementById("B").style.visibility="hidden";
    document.getElementById("A").style.visibility="visible";

}


</script>


    </head>

    <body>
        <form name="f1" method="post" action="">

        <table>

            <tr><th>catagory</th><th><input type="radio" name="cat"   value="seller" 
            onClick="hideB()">Seller


                    <input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th>  

</tr>
            <div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A">
                     Seller Name<input type='text' name='sname'><br>



          Seller Product<input type='text' name='sproduct'>
            </div>


            <div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B">
             Buyer Name<input type='text' name='bname'><br>

           Buy Product<input type='text' name='bproduct'>

            </div>


            </form>