Q&A
「Javascript チェックボックス 1つだけ」辺りで調べてみると参考になりそうな記事が見つかりますが、いかがでしょう。
※そもそも1つしかチェックできないという制約があるのでしたらチェックボックスではなくラジオボタンを採用した方がシンプルだと思いました
実現したいこと
javascriptで「チェックが外れたら全てのチェックボックスを活性化する」という挙動を作りたい
発生している問題・エラーメッセージ
ECサイトを製作中です。
注文情報のレコードが並んでいて、お客さんの入金状況を一覧できるページを作っているのですが、
「注文レコードごとに用意されているチェックボックスが押された場合に、押されたレコードと同じcustomer_idを持つ注文以外はチェックできないようにする」という機能をjavascriptで作りました。
ここまでは良かったのですが、「チェックが外れた場合、再度全てのチェックボックスが押せるようになる」
という機能が作れず、押したら押しっぱなしのまま戻らない状態になっています。
getElementBy〇〇.disabled = false;で簡単にできると思っていたのですが、どこに書いても機能せず困っています。
どのような書き方があるかご教授お願いできますでしょうか。
該当のソースコード
jsp
1<c:forEach var="pay" varStatus="loop" items="${payment}"> 2 <form:form modelAttribute="paymentRegistModel" name="info"> 3 <tr class="index"> 4 <td class="th-body"> 5 <input type="checkbox" class="checkbox" name="checkbox" id="chk"></td> 6 <th class="th-body">${pay.new_order_date}</th> 7 <th class="th-body">${pay.customer_name}</th> 8 <th class="th-body">${pay.new_order_id}</th> 9 <th class="th-body cid">${pay.customer_id}</th> 10 <th class="th-body">${pay.total_price}</th> 11 <th hidden class="th-body">${pay.customer_kana}</th> 12 <input type="hidden" id="loop_hidden" value="${loop.index}"> 13 <input type="hidden" id="payment_date" 14 value="${pay.payment_date}"> 15 </tr> 16 </form:form> 17</c:forEach>
javascript
1//チェックが入ったらフォームに表示、チェックが外れたら非表示する 2 3var check = a.childNodes[1].children[0]; //チェックボックス 4 5check.addEventListener('click',function() { 6 7 if (this.checked == true){ 8 9//customer_id(cid)のみを取り出してArray化してforEach文にかける 10//引数にindexを指定する事でindex値を取る→チェックボックスのid(chk)をindex値を付けたものに書き換える事でchkに連番を振る 11 var c_id = document.querySelectorAll(".cid"); 12 var cidRowsArray = Array.from(c_id); 13 14 cidRowsArray.forEach(function(element, index, array) { 15 16 var chkElement = document.querySelector('#chk'); 17 chkElement.setAttribute('id', 'chk' + index); 18 19//チェックボックスのnodeValue(=forEachで順繰りに入れ変わるcustomer_id)とチェックされたcustomer_idを見比べて 20//同じでなかったらそのid(=連番のついたchk)のチェックボックスを選択不可にする 21 if(element.childNodes[0].nodeValue != a.childNodes[9].innerText){ 22 23 document.getElementById("chk" + index).disabled = true; 24 25 }; 26 }); 27 28//各所に値をセットする 29 document.getElementById('tp').value = total_price; 30 document.getElementById('pm').value = total_price; 31 document.getElementById('cn').value = customer_name; 32 document.getElementById('nod').value = order_date; 33 document.getElementById('noi').value = order_id; 34 document.getElementById('ci').value = customer_id; 35 36 }else{ 37 38 document.getElementById('pd').value = null; 39 document.getElementById('tp').value = null; 40 document.getElementById('pm').value = null; 41 document.getElementById('cn').value = null; 42 }; 43});
試したこと
・disabled = false;をname、class、idでやってみた
・if (this.checked == true)文のelseにdisabledを書いてみた
・上記if文にelse if文を追記して書いてみた
・このif文の外に独立したdisabled = false;の文を書いた
ありがとうございます。今回は「一つしかチェックしたくない」のではなく、「条件が合った場合だけ複数チェックできるようにしたい」というものです。
その条件というのが「同一customer_idからの注文がレコードに表示されている場合」です。
実運用では仰る通り１つだけチェックするようなケースがほとんどかと思われますが、この想定を考慮した作りにしたいので今回の方法を取っています。
disabledにする方法は他にもあるようなので試していますが、中々解決に至りません。。
回答2件
0
ここまでは良かったのですが、「チェックが外れた場合、再度全てのチェックボックスが押せるようになる」
という機能が作れず
別の問題がいろいろある気はしますが、とりあえず全てのチェックボックスが押せるようになるコードはこうですかね。
質問者さんの要望動作の詳細が書かれていないので、この動作が要望に沿っているかどうかは知りませんが。
html
1<html> 2<head> 3<script> 4function buttonClick() { 5 document.querySelectorAll("input[type='checkbox']").forEach(function(element) { 6 element.disabled = false; 7 }); 8} 9</script> 10</head> 11<body> 12 13<input type="checkbox" id="checkbox1" disabled>checkbox1<br> 14<input type="checkbox" id="checkbox2" disabled>checkbox2<br> 15<input type="checkbox" id="checkbox3" disabled>checkbox3<br> 16<input type="button" onclick="buttonClick()" value="全てのチェックボックスが押せるようになる"> 17 18</body> 19</html>
投稿2021/09/13 08:09
総合スコア4524
0
ベストアンサー
jsp見た感じ、全部同じidになるのでは。
なのでいくらJavascriptで"chk" + indexとやっても肝心のhtmlがそのようなidの振られ方してないので何も起きません（Javascriptのエラーは起きてるかも）
idはページ内重複不可部分なので、そこも解消しましょう。
投稿2021/09/13 06:25
総合スコア80875
ありがとうございます。
debuggerで止めながら確認していますが、そこではforEach１回につき１つずつ数字が増えてchk0、chk1...となっており、挙動としても満足いくものに一応仕上がってはいるのですが、この数字の増える仕組みのままだとチェックボックスが押しっぱなしになる現象を解消できないということでしょうか？
ですからhtmlは下記ですよね。
id="chk"
これがいくつもある。
どんなにJavascriptで頑張ってもhtml上に存在しないので参照できません。
今回のようにjsからidに手を入れた場合、見た目が変わってても根元は変わってないという事でしょうか？
となると今回の目的の「チェックボックスを再入力できるようにする」を達成するのであれば大元のchkを指定して一括で動かすように書けばいいような気もしますが、それも動かないのはダブってるchkをたくさん参照しようとしているから内部的にエラーみたいなことになって動かないというような理解で良いのでしょうか？
それとも単にidのダブりがいっぱいあるのは処理的によろしくないということでしょうか。
すみません。今回詰まってるチェックボックスの再入力とidダブりの話がいまひとつ繋がってこないので…。
idにインデックスの数字を振ってるのは、単に「数字を振る方法をclass,name,idでそれぞれ書いてみたらidに振ってみたパターンがたまたま成功したからそのまま続行した」程度の理由なのですが、これを例えばClassやNameに振り直せば挙動も変わるのでしょうか。
となると最初に出た「見た目は変わっても根元は変わってない」の話に繋がって混乱します…。
結論、動かない原因はidにインデックスを振ってるからなのでしょうか？
今後につながる知識としてかなり大きなポイントのような気がします。ご意見頂戴できますでしょうか。
idはその名の通り重複できません。
JavaScriptで正しく参照できません。
htmlで同名で振ってしまってる時点で失敗してます。
つまり
var chkElement = document.querySelector('#chk');
↑は各行の要素になりません。
既に振られているidの振り直しは悪手というのもありますけどね。
htmlレンダリング時点でindex振っておけば良いのでは。
${loop.index}とか使えるのでは？
name属性で取るようにしたら成功しました！(コードの構成はほとんど変えていません)。
idが重複できないのはjsで名前を上書きしても変わらないという事で大変勉強になりました。
ありがとうございました。
そうですか。
ただID重複はHTML構文としてもNGなのでそこは改善されたほうが後々のトラブルも防げると思います。
あなたの回答
tips
プレビュー
