4

基本的に、「はい」と「いいえ」の 2 つのラジオ ボタンと、さらに 2 つの入力フィールドがあります。

[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 の head に含めます。

<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 つの方法を次に示します。

  1. テキストボックスに ID 属性と名前を付けます
  2. html属性を介して両方のテキストボックスを無効にして開始します
  3. 「はい」ラジオボタンのオンクリック、フィールド1を有効にし、フィールド2を無効にします
  4. 「いいえ」ラジオボタンの onclick、フィールド 1 を無効にし、フィールド 2 を有効にします
于 2013-03-19T10:20:34.943 に答える