0

ラジオボタンについて10個ほど質問があります。ユーザーが別のレベルに移動する前に、これらすべてをtrueに設定する必要があります。これらの10の質問に真に答えた場合にのみ、フォームの要素の1つを有効にしてさらに編集できるようにしたいと思います。これはサーバー側で実行できますが、JavaScriptで実行する方法がわかりません。何か助けはありますか？とても有難い。ありがとう。

<div>
<label> First Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][is_complete_and_works]" type="radio" value="true" />Yes</label>

<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][is_complete_and_works]" type="radio" value="false" />No</label>
</div>

<div>
<label> Second Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][researched]" type="radio" value="true" />Yes</label>

<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][researched]" type="radio" value="false" />No</label>
</div>
<div>
<label> Third Question:</label>
<label>
<input checked="checked" class="radio_buttons optional pull-right allowed" id="is_complete_and_works_true" name="project[person_attributes][is_complete_and_works]" type="radio" value="true" />Yes</label>

<label >
<input class="radio_buttons optional pull-right allowed" id="is_complete_and_works_false" name="project[person_attributes][is_complete_and_works]" type="radio" value="false" />No</label>
</div>

このコードは、さらにいくつかの質問に拡張されます。

そうすることでラジオを選択することができました：

var first_ten = $(':radio[name="project[person_attributes][is_complete_and_works]"][value=true], :radio[name="project[person_attributes][researched]"][value=true], etc…);

今、私はそれぞれを繰り返す方法がわかりません。各ラジオをクリックすると、はいかいいえかにかかわらず、要素が有効になる結果を確認したいと思います。どんな考えでも大歓迎です。

4

1 に答える 1

1

次のようなものが仕事をします：

<script type="text/javascript">

function proceed(form) {
  var el, els = form.getElementsByTagName('input');
  var i = els.length;
  while (i--) {
    el = els[i];

    if (el.type == 'checkbox' && !el.checked) {
      form.proceedButton.disabled = true;
      return; 
     }
  }
  form.proceedButton.disabled = false;
}

</script>

<form onclick="proceed(this);">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="submit" name="proceedButton" disabled>
</form>

JavaScript が利用できないか有効になっていない場合、ユーザーはボタンをクリックできないため、これは悪い設計と見なされることに注意してください。フォームを有用な状態で配信し、送信時にスクリプトを使用してボタンがすべてチェックされていることを検証し、チェックされていない場合は送信をキャンセルすることをお勧めします。

次に、サーバーで状態を確認し、現在のページが検証に合格した場合にのみ次のページを表示することもできます。そうでない場合は、ユーザーを最初のページに戻します。

そうすれば、あなたもユーザーもスクリプトが機能するかどうかを気にしなくても、ページは引き続き機能します。もちろん、スクリプトが機能する場合はより良いエクスペリエンスになる可能性がありますが、少なくとも選択はバイナリではなく、最小限の労力で非常に幅広いブラウザーをサポートするための簡単なフォールバックも提供します.

したがって、より良い解決策は次のとおりです。

<form onsubmit="reurn validate(this);" ...>
  ...
</form>

次に、関数で：

function validate(form) {
  // if validateion fails, show an appropriate message and return false,
  // if it passes, return undefined or true.
}

クライアントで何が起こったのか本当にわからないので、常にサーバーで検証してください。

編集

フォーム コントロールには名前と ID は必要ありません。名前だけを使用してください。ラジオ ボタン セットでは、チェックできるコントロールは 1 つだけで、すべてをチェックすることはできません。

あなたがやろうとしているのは、各セットで少なくとも1つのラジオボタンがチェックされているかどうかを確認することです。上記のコードに基づいて、遭遇したときに各セットを選択することができます。

function validateForm(form) {

  // Get all the form controls
  var control, controls = form.elements;
  var radios = {};
  var t, ts;

  // Iterate over them
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];

    // If encounter a radio button in a set that hasn't been visited
    if (control.type == 'radio' && !radios.hasOwnProperty(control.name)) {
      ts = form[control.name];
      radios[control.name] = false; 

      // Check the set to see if one is checked
      for (var j=0, jLen=ts.length; j<jLen; j++) {

        if (ts[j].checked) {
          radios[control.name] = true; 
        }
      }
    }
  }

   // Return false if any set doesn't have a checked radio
   for (var p in radios) {

     if (radios.hasOwnProperty(p)) {

       if (!radios[p]) {
         alert('missing one');
         return false;
       }
     }
   } 
} 

</script>

<form onsubmit="return validateForm(this);">
   <input type="radio" name="r0">
   <input type="radio" name="r0">
   <br>
   <input type="radio" name="r1">
   <input type="radio" name="r1">
   <br>   
      <input type="reset"><input type="submit">
</form>

特にラジオ ボタンを使用する場合は、フォームにリセット ボタンを含める必要があることに注意してください。

于 2012-07-30T02:45:02.690 に答える