teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問Bootstrap table内のチェックボックスにjQueryを適用できない

編集履歴

質問編集履歴

12

修正

2022/01/01 15:56

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -238,7 +238,7 @@
238
238
 
239
239
  formatter: function (value, row, index) {
240
240
 
241
- 　　　　return '<input type="checkbox" id="check_' + index + '" name="ids[]" value="' + value + '" style="transform: scale(2);" class="jojo"> \
241
+ 　　　　return '<input type="checkbox" id="check_' + index + '" name="ids[]" value="' + value + '" style="transform: scale(2);"> \
242
242
 
243
243
  　　　　　　　　<script>$("#check_' + index + '").change(function() {console.log("chenged");});</script>';
244
244
 

11

修正

2022/01/01 15:56

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -229,3 +229,17 @@
229
229
  # バージョン
230
230
 
231
231
  Laravel7.3 jQuery3.2 Vue2.5.17
232
+
233
+ # 望まない解決策
234
+
235
+ index.js内のformatter関数を以下のように変更すると成功しました。しかしできるだけこのようなコードは避けたいです。
236
+
237
+ ```js
238
+
239
+ formatter: function (value, row, index) {
240
+
241
+ 　　　　return '<input type="checkbox" id="check_' + index + '" name="ids[]" value="' + value + '" style="transform: scale(2);" class="jojo"> \
242
+
243
+ 　　　　　　　　<script>$("#check_' + index + '").change(function() {console.log("chenged");});</script>';
244
+
245
+ ```

10

修正

2022/01/01 15:55

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -224,7 +224,7 @@
224
224
 
225
225
  Bootstrap tableに関係ないcheckboxに対しても問題なく動作しています
226
226
 
227
- （<input type="checkbox" id="check_x">に対する$("input[id='check_x']").change(function...)）。
227
+ （<input type="checkbox" id="check_out_of_table">に対する$("input[id='check_out_of_table']").change(function...)）。
228
228
 
229
229
  # バージョン
230
230
 

9

修正

2022/01/01 15:17

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -222,6 +222,10 @@
222
222
 
223
223
  Bootstrap tableに関係ないjQuery関数は問題なく動作しています（buttonのdisabledの切り替えなど）。
224
224
 
225
+ Bootstrap tableに関係ないcheckboxに対しても問題なく動作しています
226
+
227
+ （<input type="checkbox" id="check_x">に対する$("input[id='check_x']").change(function...)）。
228
+
225
229
  # バージョン
226
230
 
227
231
  Laravel7.3 jQuery3.2 Vue2.5.17

8

修正

2022/01/01 15:16

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- LaravelとVue.jsを用いて以下のようにBootstrap tableにcheckboxを作りjQueryでチェックされた時のイベント検知を行おうとしておりますが上手くいきません。チェックボックスが変化したらConsoleに`changed`と表示したいです。
1
+ LaravelとVue.jsを用いて以下のようにBootstrap tableにcheckboxを作り、jQueryでチェックされた時のイベント検知を行おうとしておりますが上手くいきません。チェックボックスが変化したらConsoleに`changed`と表示したいです。
2
2
 
3
3
 
4
4
 

7

修正

2022/01/01 14:57

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -214,7 +214,7 @@
214
214
 
215
215
  jQueryのchangeメソッドをclickやon('change', ...)にしてもダメでした。
216
216
 
217
- また、bladeファイルではなくindex.js内のcreatedに同様のjQuery関数を移動してもダメでした。
217
+ また、bladeファイルではなくindex.js内のcreatedフックに同様のjQuery関数を移動してもダメでした。
218
218
 
219
219
  # できていること
220
220
 

6

修正

2022/01/01 13:57

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -68,9 +68,91 @@
68
68
 
69
69
  Vue.component('x-lists-index', {
70
70
 
71
+ data() {
72
+
73
+ return {
74
+
75
+ columns: [{
76
+
77
+ field: "id",
78
+
79
+ title: "　",
80
+
81
+ sortable: true,
82
+
83
+ formatter: function (value, row, index) {
84
+
85
+ return '<input type="checkbox" id="check_' + index + '" \
86
+
87
+ name="ids[]" value="' + value + '" style="transform: scale(2);">';
88
+
89
+ }
90
+
91
+ },
92
+
93
+ {
94
+
95
+ field: "model_number",
96
+
97
+ title: "型番",
98
+
99
+ sortable: true,
100
+
101
+ filterControl: "input",
102
+
103
+ },]
104
+
105
+ };
106
+
107
+ },
108
+
109
+ });
110
+
111
+ ```
112
+
113
+ BootstrapTableComponent.vue
114
+
115
+ ```js
116
+
117
+ <template>
118
+
119
+ <div>
120
+
121
+ <bootstrap-table
122
+
123
+ ref="table"
124
+
125
+ :data="data"
126
+
127
+ :options="options"
128
+
129
+ :columns="columns"
130
+
131
+ />
132
+
133
+ </div>
134
+
135
+ </template>
136
+
137
+
138
+
139
+ <script>
140
+
141
+ import BootstrapTable from "bootstrap-table/dist/bootstrap-table-vue.min.js";
142
+
143
+ export default {
144
+
71
145
  props: {
72
146
 
73
- propsLotUnitArray: Object
147
+ propsData: Array,
148
+
149
+ propsColumns: Array,
150
+
151
+ },
152
+
153
+ components: {
154
+
155
+ "bootstrap-table": BootstrapTable
74
156
 
75
157
  },
76
158
 
@@ -78,144 +160,56 @@
78
160
 
79
161
  return {
80
162
 
163
+ data: [],
164
+
81
- columns: [{
165
+ options: {
166
+
82
-
167
+ search: true,
168
+
169
+ detailView: true,
170
+
171
+ detailFormatter: null,
172
+
173
+ pagination: true,
174
+
175
+ showColumns: true,
176
+
177
+ filterControl: true,
178
+
179
+ toolbar: "#toolbar",
180
+
181
+ clickToSelect: true,
182
+
83
- field: "id",
183
+ idField: "id",
84
-
184
+
85
- title: "　",
185
+ selectItemName: "id",
86
-
186
+
87
- sortable: true,
187
+ resizable: true,
88
-
188
+
89
- formatter: function (value, row, index) {
189
+ locale: "ja-JP"
90
-
91
- return '<input type="checkbox" id="check_' + index + '" \
92
-
93
- name="ids[]" value="' + value + '" style="transform: scale(2);">';
94
-
95
- }
96
190
 
97
191
  },
98
192
 
99
- {
100
-
101
- field: "model_number",
102
-
103
- title: "型番",
104
-
105
- sortable: true,
193
+ columns: []
106
-
107
- filterControl: "input",
108
-
109
- },]
110
194
 
111
195
  };
112
196
 
113
197
  },
114
198
 
199
+ created() {
200
+
201
+ this.columns = this.propsColumns;
202
+
203
+ this.data = this.propsData;
204
+
205
+ },
206
+
115
- });
207
+ };
208
+
209
+ </script>
116
210
 
117
211
  ```
118
212
 
119
- BootstrapTableComponent.vue
120
-
121
- ```js
122
-
123
- <template>
124
-
125
- <div>
126
-
127
- <bootstrap-table
128
-
129
- ref="table"
130
-
131
- :data="data"
132
-
133
- :options="options"
134
-
135
- :columns="columns"
136
-
137
- />
138
-
139
- </div>
140
-
141
- </template>
142
-
143
-
144
-
145
- <script>
146
-
147
- import BootstrapTable from "bootstrap-table/dist/bootstrap-table-vue.min.js";
148
-
149
- export default {
150
-
151
- props: {
152
-
153
- propsData: Array,
154
-
155
- propsColumns: Array,
156
-
157
- },
158
-
159
- components: {
160
-
161
- "bootstrap-table": BootstrapTable
162
-
163
- },
164
-
165
- data() {
166
-
167
- return {
168
-
169
- data: [],
170
-
171
- options: {
172
-
173
- search: true,
174
-
175
- detailView: true,
176
-
177
- detailFormatter: null,
178
-
179
- pagination: true,
180
-
181
- showColumns: true,
182
-
183
- filterControl: true,
184
-
185
- toolbar: "#toolbar",
186
-
187
- clickToSelect: true,
188
-
189
- idField: "id",
190
-
191
- selectItemName: "id",
192
-
193
- resizable: true,
194
-
195
- locale: "ja-JP"
196
-
197
- },
198
-
199
- columns: []
200
-
201
- };
202
-
203
- },
204
-
205
- created() {
206
-
207
- this.columns = this.propsColumns;
208
-
209
- this.data = this.propsData;
210
-
211
- },
212
-
213
- };
214
-
215
- </script>
216
-
217
- ```
218
-
219
213
  # 試したこと
220
214
 
221
215
  jQueryのchangeメソッドをclickやon('change', ...)にしてもダメでした。

5

修正

2022/01/01 13:56

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  <x-lists-index inline-template>
18
18
 
19
- <form action="{{ route('xLists.delete') }}" method="post">
19
+ <form action="{{ route('xLists.multiDelete') }}" method="post">
20
20
 
21
21
  @csrf
22
22
 

4

修正

2022/01/01 13:55

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -224,9 +224,9 @@
224
224
 
225
225
  # できていること
226
226
 
227
- チェックされた項目を複数削除する機能は問題なく動作しています。
227
+ チェックされた行を複数削除する機能は問題なく動作しています。
228
-
228
+
229
- Bootstrap tableに関係ないjQuery関数は問題なく動作しています。
229
+ Bootstrap tableに関係ないjQuery関数は問題なく動作しています（buttonのdisabledの切り替えなど）。
230
230
 
231
231
  # バージョン
232
232
 

3

修正

2022/01/01 13:53

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 以下のようにBootstrap tableにcheckboxを作りjQueryでチェックされた時のイベント検知を行おうとしておりますが上手くいきません。チェックボックスが変化したらConsoleに`changed`と表示したいです。
1
+ LaravelとVue.jsを用いて以下のようにBootstrap tableにcheckboxを作りjQueryでチェックされた時のイベント検知を行おうとしておりますが上手くいきません。チェックボックスが変化したらConsoleに`changed`と表示したいです。
2
2
 
3
3
 
4
4
 
@@ -224,4 +224,10 @@
224
224
 
225
225
  # できていること
226
226
 
227
- チェックされた項目を複数削除する昨日は問題なく動作しています。
227
+ チェックされた項目を複数削除する機能は問題なく動作しています。
228
+
229
+ Bootstrap tableに関係ないjQuery関数は問題なく動作しています。
230
+
231
+ # バージョン
232
+
233
+ Laravel7.3 jQuery3.2 Vue2.5.17

2

修正

2022/01/01 13:52

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -221,3 +221,7 @@
221
221
  jQueryのchangeメソッドをclickやon('change', ...)にしてもダメでした。
222
222
 
223
223
  また、bladeファイルではなくindex.js内のcreatedに同様のjQuery関数を移動してもダメでした。
224
+
225
+ # できていること
226
+
227
+ チェックされた項目を複数削除する昨日は問題なく動作しています。

1

修正

2022/01/01 13:48

投稿

hoboki
hoboki

スコア52

test CHANGED
File without changes
test CHANGED
@@ -134,8 +134,6 @@
134
134
 
135
135
  :columns="columns"
136
136
 
137
- @on-click-row="onClickRow"
138
-
139
137
  />
140
138
 
141
139
  </div>