質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

5619閲覧

セレクトボックスの値によってチェックボックスの選択を制御したい

ssk

総合スコア332

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/02/08 07:18

編集2017/02/08 07:58

HTML

1<div id="authority"> 2 <select name="authority"> 3 <option value="user">ユーザー</option> 4 <option value="manager">編集者</option> 5 <option value="admin">管理者</option> 6 </select> 7</div>

HTML

1<div id="shop"> 2 <input type="checkbox" name="hoge[]" value="1">支店1 3 <input type="checkbox" name="hoge[]" value="2">支店2 4 <input type="checkbox" name="hoge[]" value="3">支店3 5 <input type="checkbox" name="hoge[]" value="4">支店4 6</div>

######説明

<div id="authority">の``value``が``user``の時(デフォルト) →<div id="shop">の中のチェックボックスは1つのみ選択可能 <div id="authority">の``value``が``manager``の時 →<div id="shop">の中のチェックボックスは複数選択可能 <div id="authority">の``value``が``admin``の時 →<div id="shop">の中のチェックボックスを全て選択、操作もできないようにする

としたいです。
お力添えください。

よろしくお願いいたします。

######追記

HTML

1<div id="authority"> 2 <select name="authority"> 3 <option value="user">ユーザー</option> 4 <option value="manager">編集者</option> 5 <option value="admin">管理者</option> 6 </select> 7</div>

HTML

1<div id="shop"> 2 <label><input type="checkbox" name="shop[]" value="1">支店1</label> 3 <label><input type="checkbox" name="shop[]" value="2">支店2</label> 4 <label><input type="checkbox" name="shop[]" value="3">支店3</label> 5 <label><input type="checkbox" name="shop[]" value="4">支店4</label> 6</div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/02/08 07:21

ソースと説明がブレていますid="authority"はdivとselectのどちらにつくのでしょか?またselectにはnameなどつかないのでしょうか?fistでアクセスする?
ssk

2017/02/08 07:25

確認不足でした。申し訳ございません。修正いたしました。
kei344

2017/02/08 07:54

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
ssk

2017/02/08 07:59

追記いたしました。
kei344

2017/02/08 08:05

すいません、HTMLだけでは制御できないと思いますが・・・。
guest

回答2

0

ベストアンサー

adminからmanagerやuser、manegerからuserに移ったときの
条件の競合がありますね
あとえばadminで全チェックしたあとにuserに変えたら
userは1つしか選べないという条件にあいません。
authorityを変化する度にcheckboxをクリアするのか、そのまま
でいいのか、仕様詰めたほうがいいですね

とりあえずそのままにするバージョンは以下

javascript

1$(function(){ 2 $('#authority select[name=authority],#shop input[type=checkbox]').on('change',function(){ 3 var v=$('#authority select[name=authority]').val(); 4 var l=$('#shop input[type=checkbox]:checked').length; 5 switch(v){ 6 case 'user': 7 $('#shop input[type=checkbox]:not(:checked)').prop('disabled',l>=1).prop('readonly',false); 8 break; 9 case 'manager': 10 $('#shop input[type=checkbox]:not(:checked)').prop('disabled',false).prop('readonly',false); 11 break; 12 case 'admin': 13 $('#shop input[type=checkbox]:not(:checked)').prop('disabled',false).prop('checked',true).prop('readonly',true); 14 break; 15 } 16 }); 17});

#追記
クリアするバージョンは複雑な条件設定もできますが
とりあえずauthorityがかわったら全部チェックはずしていいなら以下

javascript

1$(function(){ 2 $('#authority select[name=authority],#shop input[type=checkbox]').on('change',function(e){ 3 var flg=e.target.name=='authority'; 4 if(flg) $('#shop input[type=checkbox]').prop('checked',false); 5 var v=$('#authority select[name=authority]').val(); 6 var l=$('#shop input[type=checkbox]:checked').length; 7 switch(v){ 8 case 'user': 9 $('#shop input[type=checkbox]:not(:checked)').prop('disabled',l>=1).prop('readonly',false); 10 break; 11 case 'manager': 12 $('#shop input[type=checkbox]:not(:checked)').prop('disabled',false).prop('readonly',false); 13 break; 14 case 'admin': 15 $('#shop input[type=checkbox]:not(:checked)').prop('disabled',false).prop('checked',true).prop('readonly',true); 16 break; 17 } 18 }); 19}); 20

投稿2017/02/08 08:11

編集2017/02/08 08:29
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ssk

2017/02/08 08:19

ありがとうございます。 authorityを変化する度にcheckboxをクリアする場合はどのように記述するばよいでしょうか?
yambejp

2017/02/08 08:30

クリアするバージョン追記しときました
ssk

2017/02/08 08:32

ありがとうございます! 実装いたします。
guest

0

  1. select 変更時に、選択値が admin だったらすべてチェックを入れる

  2. チェックボックスの onclick で、admin だったら変更させない (return false)、

user だったら、チェック済のものが 1 つ以上あれば変更させない、
manager だったら return true

とかでしょうか。

javascript

1$(function() { 2 3 //======================================== 4 // 権限 変更時の処理 5 //======================================== 6 $("select[name='authority']").on("change", function() { 7 var $select = $(this); 8 var selectedValue = $select.val(); 9 10 alert("変更されました: " + selectedValue); 11 12 // ★admin の場合は、ここですべてのチェックボックスをONにする 13 14 }); 15 16 //======================================== 17 // チェックボックスに click イベントを設定 18 //======================================== 19 $("#shop input[type='checkbox']").each(function() { 20 var $chk = $(this); 21 22 $chk.on("click", function() { 23 var $chk = $(this); 24 25 // ★とりあえず常にreadonlyの例 26 // ★実際は select の選択値や選択されているチェックボックスの数によって分岐させる 27 28 return false; 29 }); 30 }); 31 32}); 33

投稿2017/02/08 08:08

sk_3122

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ssk

2017/02/08 08:20

ありがとうございます。 コメント助かります。いただいたコードを参考に、実装いたします。
ssk

2017/02/08 08:36

コメント情報をいただき、非常にわかりやすく助かりました>< ただ、申し訳ございませんが、今回は具体的な助言をくださったyambejp様をベストアンサーにいたします。 本当に助かりました。 重ねて御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問