質問するログイン新規登録

回答編集履歴

1

追記

2021/11/12 00:49

投稿

KAOsaka
KAOsaka

スコア531

answer CHANGED
@@ -51,4 +51,64 @@
51
51
  window.dispatchEvent(new CustomEvent("App.Form.changed"));
52
52
  });
53
53
  </script>
54
+ ```
55
+
56
+ ## 追記
57
+
58
+ jQueryに置き換えたものが以下になります。
59
+
60
+ ``` js
61
+ <div>
62
+ <label>設問1</label>
63
+ <select id="form1" class="select" name="option_01">
64
+ <option value="" disabled selected>選択してください</option>
65
+ <option value="1">YES</option>
66
+ <option value="2">NO</option>
67
+ </select>
68
+ </div>
69
+
70
+ <div>
71
+ <label>設問2</label>
72
+ <select id="form2" class="select" name="option_02">
73
+ <option value="" disabled selected>選択してください</option>
74
+ <option value="1">YES</option>
75
+ <option value="2">NO</option>
76
+ </select>
77
+ </div>
78
+
79
+ <div>
80
+ <input type="checkbox" id="agree" value="1" disabled>
81
+ <label for="agree">同意する</label>
82
+ </div>
83
+
84
+ <button id="join_button" disabled>送信</button>
85
+
86
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
87
+
88
+ <script>
89
+ const $window = $(window);
90
+ const $form1 = $("#form1");
91
+ const $form2 = $("#form2");
92
+ const $agree = $("#agree");
93
+ const $joinButton = $("#join_button");
94
+
95
+ $window.on("App.Form.changed", (event) => {
96
+ let isFormValid = true;
97
+
98
+ isFormValid = isFormValid && $form1.find("option:selected").val() !== "";
99
+ isFormValid = isFormValid && $form2.find("option:selected").val() !== "";
100
+
101
+ $agree.attr("disabled", !isFormValid);
102
+
103
+ $joinButton.attr("disabled", !isFormValid);
104
+ });
105
+
106
+ $form1.on("change", (event) => {
107
+ $window.trigger("App.Form.changed");
108
+ });
109
+
110
+ $form2.on("change", (event) => {
111
+ $window.trigger("App.Form.changed");
112
+ });
113
+ </script>
54
114
  ```