4

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

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

5 回答 5

4

这个小数字怎么样：

$(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。让我知道它是如何公平的。

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

，focus()当然，不是必需的 - 但是小事情会产生很大的不同，当网站将我的光标移动到我预期的位置时，我总是更喜欢它。

于 2013-03-19T10:20:07.983 回答
1

将此 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 添加到文本输入中，显然可以根据需要命名。

于 2013-03-19T10:18:05.520 回答
1

您可以使用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/

于 2013-03-19T10:18:24.693 回答
0 
<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. onclick 'no' 单选按钮，禁用 field1 并启用 field2
于 2013-03-19T10:20:34.943 回答
0 
<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>
于 2013-06-15T11:57:56.657 回答