質問編集履歴

1

チェックボックスのソース・js・手順の追記

2019/03/17 23:45

投稿

gobindar
gobindar

スコア51

test CHANGED
File without changes
test CHANGED
@@ -16,33 +16,39 @@
16
16
 
17
17
  view内のある変数(当質問ではold値)の内容を
18
18
 
19
- 基準にdisabledを設定したいのですが、
19
+ 基準にdisabledを設定したい(下記操作手順④)のですが、
20
20
 
21
21
  エラーが出現するため困っています。
22
22
 
23
23
 
24
24
 
25
- ### 意図
25
+ ### 操作手順と意図
26
26
 
27
- disabled設定す意図は、
27
+ ① データ入力画面にて、チェックボックスにチェック入れ
28
28
 
29
- view
29
+ (javascriptより、チェックボックスをクリックすると
30
30
 
31
- セレクトボックス
31
+ セレクトボックスが無効化される)
32
32
 
33
- チェックックスがありま
33
+ ② 確認タンを押し、データ入力の確認画面へ移動する
34
34
 
35
- チェックックスがチェックされてい場合はセレクトボックスを無効化し、
35
+ ③ 戻るタンで確認画面からデータ入力画面に戻
36
36
 
37
- チェックされていない場合セレクトボックス有効にたく、
37
+ ④ データ入力画面に戻ると、各項目old値取得ているので
38
38
 
39
- チェックの動作(=click)にdisabledにはjscriptを使用してできたです
39
+   入力時の保持されている。
40
40
 
41
- 画面から戻ってきたときに、チェックが入っている状態(=チェックボックスのold値on)
41
+   こ、チェックボックスにはチェックが入っているが
42
42
 
43
- の場合、セレクトボックスが最初から無効化できないので、
43
+   セレクトボックス無効化された状態にってない。
44
44
 
45
+ (無効化のjavascriptはクリックをトリガーにしているので当然)
46
+
47
+   そのため、viewを読み込む際に、チェックボックスのold値が
48
+
49
+   onになっている場合は、セレクトボックスをdisabledにする
50
+
45
- 上記やりたいことに至っております
51
+   ようにしたい。
46
52
 
47
53
 
48
54
 
@@ -60,11 +66,11 @@
60
66
 
61
67
 
62
68
 
63
- ソース
69
+ viewのソース
64
70
 
65
71
  ```php
66
72
 
67
-
73
+ //セレクトボックス
68
74
 
69
75
  {!! Form::select('category', $items->category, old('category'), ['id' => 'category_select', 'placeholder' => '選択してください',
70
76
 
@@ -74,9 +80,31 @@
74
80
 
75
81
 
76
82
 
83
+ //チェックボックス
84
+
85
+ <div class="pretty p-icon p-curve">
86
+
87
+ <input type="hidden" name="undecided" value="">
88
+
89
+ {!! Form::checkbox('undecided', 'on', old('undecided'), ['id' => 'undecided', 'onclick' => 'clicksetNonSelect("category_select")']) !!}
90
+
91
+ <div class="state">
92
+
93
+ <i class="icon mdi mdi-check"></i>
94
+
95
+ <label>カテゴリを設定しない</label>
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+
102
+
77
103
  ```
78
104
 
105
+
106
+
79
- エラー時に出力されるソース
107
+ エラー時に出力されるソース(laravel collectiveの表記変換後)
80
108
 
81
109
  ```php
82
110
 
@@ -90,6 +118,32 @@
90
118
 
91
119
 
92
120
 
121
+ チェックボックスクリック時にセレクトボックスを無効化するjs
122
+
123
+ ```php
124
+
125
+ function clicksetNonSelect(undecided){
126
+
127
+ if ($("#undecided").prop("checked") == true) {
128
+
129
+ var obj = document.getElementById(undecided);
130
+
131
+ obj.selectedIndex = 0;
132
+
133
+ $("#category_select").attr('disabled', true);
134
+
135
+ } else {
136
+
137
+ $("#category_select").attr('disabled', false);
138
+
139
+ }
140
+
141
+ };
142
+
143
+
144
+
145
+ ```
146
+
93
147
 
94
148
 
95
149