jQuery: イベントの追加

前提・実現したいこと

jQueryで、フォームを作っています。
“確定”ボタンを作り、1回目のクリックでフォーム内容を全て”disable”で記入できなくさせる。もう一度クリックすると記入できるようにする。これを繰り返せるようなコードを書きたいです。

よろしくお願いします！

m.ts10806

2021/04/13 01:00

>書きたいですと言いながら >よろしくお願いします　とは矛盾してませんか。

行動規範の内容に同意します

回答2件

ベストアンサー

HTML
1<form>
2  <input type="text" /><br />
3  <input type="checkbox"><br />
4  <input type="radio" name="radio" id="yes">
5  <label for="yes">Yes</label>
6  <input type="radio" name="radio" id="no">
7  <label for="no">No</label><br />
8  <select>
9    <option value="1">A</option>
10    <option value="2">B</option>
11  </select><br/>
12  <button type="button" id="button">確定</botton>
13</form>

JavaScript
1jQuery(($) => {
2  const controls = $("form").find("input, select");
3  $("#button").on("click", (evt) => {
4    controls.prop("disabled", (i, disabled) => !disabled);
5  })
6});

投稿2021/04/13 01:11

root_jp

総合スコア4666

xxx0_0xxx

2021/04/13 13:50

とてもご丁寧にありがとうございます！二回目のクリックが効かなかったので手こずっていました。 root_ipさんのを参考にした結果無事解決できました！ありがとうございます^^

行動規範の内容に同意します

javascript
1<script>
2$(function(){
3  $('#btn').on('click',function(){
4    var flg=$(this).val()=='確定';
5    $(this).val(flg?"解除":"確定");
6    $(this).closest('form').find('input,select').not(this).prop('disabled',flg)
7  });
8});
9</script>
10<form>
11<input type="text" ><br>
12<input type="text" ><br>
13<input type="checkbox" ><br>
14<input type="radio" name="hoge">
15<input type="radio" name="hoge">
16<input type="radio" name="hoge"><br>
17<select>
18<option></option>
19<option></option>
20<option></option>
21</select><br>
22<input type="button" value="test">
23<input type="button" id="btn" value="確定">
24</form>