2016-06-11 5 views
0

以下のように4つのラジオボタングループを持つフォームを作成しました。 2つの送信ボタンもあります。グループごとに1つのラジオボタンを選択せず​​にフォームを送信できないようにしたいと思います(フォームを送信するには4つのラジオボタンを選択する必要があります)。すべてのラジオボタンが選択されている場合にのみ送信ボタンを有効にするにはどうすればよいですか?

私はこれに関する記事の前のアドバイスに従っていますが、ラジオボタンのグループでは機能していないようです。これに関するアドバイスはありますか?

<form action="http://test/" method="post" accept-charset="utf-8"> 
<table> 
    <tbody> 
     <tr> 
      <td><label><input type="radio" name="item_6" value="0" class="radio1"> foo</label></td> 
      <td><label><input type="radio" name="item_7" value="0" class="radio2"> foo</label></td> 
      <td><label><input type="radio" name="item_8" value="0" class="radio3"> foo</label></td> 
      <td><label><input type="radio" name="item_9" value="0" class="radio4"> foo</label></td> 
     </tr> 
     <tr> 
      <td><label><input type="radio" name="item_6" value="1" class="radio1"> bar</label></td> 
      <td><label><input type="radio" name="item_7" value="1" class="radio2"> bar</label></td> 
      <td><label><input type="radio" name="item_8" value="1" class="radio3"> bar</label></td> 
      <td><label><input type="radio" name="item_9" value="1" class="radio4"> bar</label></td> 
     </tr> 

     <tr> 
      <td><label><input type="radio" name="item_6" value="2" class="radio1"> baz</label></td> 
      <td><label><input type="radio" name="item_7" value="2" class="radio2"> baz</label></td> 
      <td><label><input type="radio" name="item_8" value="2" class="radio3"> baz</label></td> 
      <td><label><input type="radio" name="item_9" value="2" class="radio4"> baz</label></td> 
     </tr> 
     <tr> 
      <td><label><input type="radio" name="item_6" value="3" class="radio1"> hat</label></td> 
      <td><label><input type="radio" name="item_7" value="3" class="radio2"> hat</label></td> 
      <td><label><input type="radio" name="item_8" value="3" class="radio3"> hat</label></td> 
      <td><label><input type="radio" name="item_9" value="3" class="radio4"> hat</label></td> 
     </tr> 
     <tr> 
      <td><label><input type="radio" name="item_6" value="9" class="radio1"> user</label></td> 
      <td><label><input type="radio" name="item_7" value="9" class="radio2"> user</label></td> 
      <td><label><input type="radio" name="item_8" value="9" class="radio3"> user</label></td> 
      <td><label><input type="radio" name="item_9" value="9" class="radio4"> user</label></td> 
     </tr> 
    </tbody> 
    <tbody> 
     <tr> 
      <td><button type="submit" disabled="disabled" name="submit_form" value="save_more"> 
       Save & More</button> 
      </td> 
     </tr> 
     <tr> 
      <td><button type="submit" disabled="disabled" name="submit_form" value="save_logout"> 
       Save & LOGOUT</button> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</form> 

JS:

<script type="text/javascript"> 
$(function(){ 
    $("input[type='radio']").change(function(){ 
     $("input[type='submit']").prop("disabled", false); 
    }); 
    }); 
</script> 
+0

あなたはそれがあなたのcritereaと一致した場合に提出することを防止するために)提出するフォームタグのイベント、およびevent.preventDefault(に加入する必要があります。 – HelloWorld

+0

純粋なPHPでこれを行うことができます。 –

+0

このHTMLはビュー(私はCodeIgniterを使用しています)でループして生成されますので、提案があればyesです。 – pepe

答えて

4

単純に各グループの要素の1つに "必要" 属性を追加

以下

はHTMLです。 HTML標準で定義されています。ブラウザは残りの部分を処理します。

Refer this similar question

+0

あなたが言ったように、送信ボタンを有効にしました - 私のHTML出力は ''です。まだフォームを提出する - 私は何か間違っている? – pepe

+0

ここで働いています。ブラウザがこのテストを実装していないことが必要です。それを更新してみてください。または上記のSOの質問を見て、それらの例を試してみてください。彼らはすべてここで働く。 –

+0

これらの項目はすべてビューで動的に生成されているため、すべてのグループのすべてのラジオボタンには 'required'属性があります。問題ありますか? – pepe

関連する問題