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

Enabling text fields based on radio button selection

提问by Paul

Basically, I have two radio button 'yes' and 'no' and then a further two input fields.

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

[LabelQuestion] [RadioYes][RadioNo]

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

By default I would like to have text fields 1 and 2 inactive/not able to enter in data until the relevant radio button has been selected and then that field only becomes available for data input.

默认情况下，我希望文本字段 1 和 2 处于非活动状态/无法输入数据，直到选择了相关的单选按钮，然后该字段才可用于数据输入。

I am a complete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.

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

My current code looks like this:

我当前的代码如下所示：

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

采纳答案by George

How about this little number:

这个小数字怎么样：

$(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();   
        }
    });
});

You'll find a JSFiddle here.

你会在这里找到一个JSFiddle。

Please note I've added an ID to both <input>fields. Let me know how it fairs.

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

If you prefer for the <input>fields to be disabledrather than readonly, just replace readonlywith disabledeverywhere. I personally think readonlyis nicer as the Operating System seems to make more of it's own effect on disabled inputs.

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

The focus(), of course, isn't necessary - But the little things make a big difference and I always prefer it when a website moves my cursor to where it's expected to be for me.

的focus()，当然，是没有必要的-但小东西有很大的不同，我总是喜欢它，当一个网站，我的光标移动到它的预期是对我来说。

回答by Danny Brady

Add this javascript/jQuery to your html, this should do the trick:

将此 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>

Very basic, just adds an onclick function to each of the inputs and enables or disables the 'disabled' property for the relevant text input. You will need to add the "#input1" and "#input2" ID's to the text inputs, naming can be as desired obviously.

非常基本，只需为每个输入添加一个 onclick 函数并启用或禁用相关文本输入的“禁用”属性。您需要将“#input1”和“#input2” ID 添加到文本输入中，显然可以根据需要命名。

回答by Daniel

You could use http://jquery.com/to do this:

你可以使用http://jquery.com/来做到这一点：

include this in the head of your html:

将此包含在您的 html 的头部：

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

And also add this javascript:

并添加这个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>

Check the jsfiddle for a working example http://jsfiddle.net/KFgbg/3/

检查 jsfiddle 的工作示例http://jsfiddle.net/KFgbg/3/

回答by Joe Stein

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

there are many ways to do this, but to edit your code as little as possible, here's one way:

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

1. give your textboxes ID attributes as well as names
2. disable via html attribute both text boxes to start
3. onclick of 'yes' radio button, enable field1 and disable field2
4. onclick of 'no' radio button, disable field1 and enable field2

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

回答by vidhya

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