条件を果たさないとラジオボタンの値を送信したくない場合

Question

<form>
 <input type="radio" name="radiobtn" id="A" checked/>A
 <input type="radio" name="radiobtn" id="B"/>B
 <input type="text" id="c"/>
</form>

<input type="text" />に入力がない場合は
ラジオボタンのチェック内容を送りたくない場合は
submit()の中身を

if($("#c").val()=""){
$("input").attr("disabled","disabled");
}
的な処理でいいですか？
他にいい方法があれば教えてください。

Answer 1

ユーザーはチェックしたとおもって送っているのに実際には送られないという
UIとして考え方がおかしい

• cに値がない場合はアラートをだして送れないようにする
• 受け取った側でcが値がなかった場合radiobtnを無視し、必要ならエラーを表示する

のどちらかにスべきです。
仮に、onsubmit処理でdisableを設定した場合、
戻るボタンで戻ってきたときにradiobtnが選択できない状態になることも
考慮したほうがよいです。（もちろん戻るをさせないという考え方もあります）

Comments

[rainbowsix]

片方のみ送ってしまうとエラーを起こすシステムだったので（汗）
回答ありがとうございました。

[rainbowsix]

戻った場合はdisable解除するようにしました。ありがとうございます。

Answer 2

if($("#c").val()=""){ 
$("input").attr("disabled","disabled"); 
} 

比較演算子が
if($("#c").val()==""){
ではありますが、disabled属性を付与しているのでformデータとしては送られなくなるのでここはOKだと思います。

でも入力していなければ送らせないという条件でif($("#c").val()==""){ ならalert出して入力促してreturn falseするのも手です。

Comments

[rainbowsix]

ベストアンサーとさせていただきます。ありがとうございます。

Answer 3

あと比較演算は == または === などですよ。

JSでその条件でやるのであれば初期状態ではラジオボタンそのものをソースに書かず、

<span id="radioarea"></span>

みたいに入力エリアだけ作っておき、

$('input[type="text"]').on('input change blur', function() {
	if($(this).val != '') {
		var radio_template = '' +
		 '<input type="radio" name="radiobtn" id="A" checked/>A' +
		 '<input type="radio" name="radiobtn" id="B"/>B';
		$('#radioarea').html(radio_template);
	}
});

のような形ではいかがですか？

Comments

[hiim]

横からすいません、
> disabledは「入力不可」なだけで送られます。
readonlyはそうですが、disbledは送られなかったのでは？？

[takepieee]

すみません、その通りです。修正しておきます。

[rainbowsix]

なるほどですね。今回は最初から<input type="radio"～を表示しないといけなかったので
今後参考にします。回答ありがとうございました。