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

请注意我已在<input>个字段中添加了ID。让我知道它是如何展览的。

如果您希望<input>字段为disabled而不是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"  />

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

提供您的文本框ID属性以及名称
通过html属性禁用两个文本框以启动
单击“是”单选按钮，启用field1并禁用field2
点击'no'单选按钮，禁用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>

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

5 个答案: