基于单选按钮选择启用文本字段

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

这点亮怎么样tle 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(); 
     } 
    }); 
}); 

你会找到一个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功能，每个的输入并启用或禁用相关文本输入的“禁用”属性。您需要将“＃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. onclick'yes'单选按钮，启用field1并禁用field2 01 '否' 单选按钮的
4. 的onclick，禁用FIELD1并启用场2

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>