jQuery: イベントの追加

Question

前提・実現したいこと

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

よろしくお願いします！

Comments

[m.ts10806]

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

Answer 1

<form>
  <input type="text" /><br />
  <input type="checkbox"><br />
  <input type="radio" name="radio" id="yes">
  <label for="yes">Yes</label>
  <input type="radio" name="radio" id="no">
  <label for="no">No</label><br />
  <select>
    <option value="1">A</option>
    <option value="2">B</option>
  </select><br/>
  <button type="button" id="button">確定</botton>
</form>

jQuery(($) => {
  const controls = $("form").find("input, select");
  $("#button").on("click", (evt) => {
    controls.prop("disabled", (i, disabled) => !disabled);
  })
});

Comments

[xxx0_0xxx]

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

Answer 2

<script>
$(function(){
  $('#btn').on('click',function(){
    var flg=$(this).val()=='確定';
    $(this).val(flg?"解除":"確定");
    $(this).closest('form').find('input,select').not(this).prop('disabled',flg)
  });
});
</script>
<form>
<input type="text" ><br>
<input type="text" ><br>
<input type="checkbox" ><br>
<input type="radio" name="hoge">
<input type="radio" name="hoge">
<input type="radio" name="hoge"><br>
<select>
<option></option>
<option></option>
<option></option>
</select><br>
<input type="button" value="test">
<input type="button" id="btn" value="確定">
</form>

ただしdisabledにしたデータは送信できません。