return false がついてたのね･･･とほほ･･･[ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ]
(2014-03-14 13:54:09) by shinoda
< ﾍﾟｰｼﾞ移動: 1 2 >
一昨日の午後は本当に無駄な時間を過ごしてしまった
複数あるﾁｪｯｸﾎﾞｯｸｽのﾁｪｯｸした数をﾘｱﾙﾀｲﾑに調べて､4つ以上ﾁｪｯｸしたらﾜｰﾆﾝｸﾞを出そうと思って､以下のようなｽｸﾘﾌﾟﾄを書いた｡
function chkCHKBOX(idx){
var total = 0;
var max = window.document.form.elements['CHKBOX'].length;
for (var i = 0; i < max; i++) {
if (window.document.form.elements['CHKBOX'][i].checked) {
total += 1;
}
}
if (total > 3) {
alert("同時にﾁｪｯｸできるのは3つまでです");
window.document.form.elements['CHKBOX'][idx].checked = false;
}
}
jQuery 使ってひたすらﾁｪｯｸﾎﾞｯｸｽの状況を監視するｽｸﾘﾌﾟﾄを書いてもいいんだろうが､まあ､そこまでするほどじゃないので簡単な方法で｡
HTML は､
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(0);" value="ﾃﾚﾋﾞ" />ﾃﾚﾋﾞ<br />
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(1);" value="CD" />CD<br />
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(2);" value="DVD" />DVD<br />
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(3);" value="映画" />映画<br />
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(4);" value="書籍" />書籍<br />
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(5);" value="その他" />その他<br />
てな感じで｡
ﾁｪｯｸﾎﾞｯｸｽの ONCLICK ｲﾍﾞﾝﾄが発生する度に chkCHKBOX 関数を実行するだけ｡
ﾁｪｯｸ数が3個を超えていたら､ﾜｰﾆﾝｸﾞを出して､直近のﾁｪｯｸを外すだけという単純な動き｡
なのに､上手くいかない｡
ﾁｪｯｸﾎﾞｯｸｽをｸﾘｯｸしてもﾁｪｯｸが付かないのだ｡1つ目から｡3個超えたわけじゃないのに｡
ま､原因は､最初に HTML を書いた時に､
<input type="checkbox" name="CHKBOX" onClick="chkCHKBOX(0);return false;" value="ﾃﾚﾋﾞ" />ﾃﾚﾋﾞ<br />
としてたから｡
他所の行をｺﾋﾟってきて､そのまま消し忘れてたは･･･
ｸﾘｯｸされた時に実行させる関数の動きだけで処理を止める場合､最後に return false; を付ける｡そうしないと､関数実行終了後にその FORM 本来の動きが実行されちゃうのだ｡
例えば､type="submit" のﾎﾞﾀﾝの ONCLICK ｲﾍﾞﾝﾄで document.form.submit(); みたいに FORM を実行してるのに､ちゃんと onClick="document.form.submit();return false;" みたいにしてないと､その後､今度は submit ﾎﾞﾀﾝ本来の動きで FORM が実行され二重実行になってしまう｡そうしないためには､ｲﾍﾞﾝﾄの最後に return false; を入れて､FORM 本来の動きを中断させちゃうということ｡