jQueryでラジオボタンの切り替え時にフォームの値を空にする方法
55 回閲覧されました
みなさんこんにちは、jonioです。
今回はラジオボタンとフォームが連動していてラジオボタンを切り替えた時に前のフォームの値が空っぽになってフォームを切り替えるまで前のフォームに値を入力することができなくなる方法の解説です。
デモ
下記の動画の挙動になります。
HTMLとCSS
下記のコードになります。
<div class="flex">
<input type="radio" name="filter_type" value="year" id="form1" checked="checked">
フォーム1 : <input type="text" placeholder="フォーム1" id="form1-input">
</div>
<div class="flex">
<input type="radio" name="filter_type" value="month" id="form2">
フォーム2 : <input type="text" placeholder="フォーム2" id="form2-input">
</div>
<style>
.flex{
display: flex;
column-gap:20px;
margin-top: 30px;
}
</style>jQuery
下記のコードになります。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
(function($) {
let $form1_radio = $('#form1');
let $form2_radio = $('#form2');
let $form1_input = $('#form1-input');
let $form2_input = $('#form2-input');
function toggleInputs() {
if ($form1_radio.is(':checked')) {
$form1_input.prop('disabled', false);
$form2_input.prop('disabled', true);
$form2_input.val('');
} else if ($form2_radio.is(':checked')) {
$form1_input.prop('disabled', true);
$form2_input.prop('disabled', false);
$form1_input.val('');
}
}
toggleInputs();
$('input[name="filter_type"]').on('change', function() {
toggleInputs();
});
})(jQuery);
</script>フォームの値を空にして値の入力ができないようになるのが8行目〜18行目です。
10行目の「.prop」はHTMLの属性を設定できます。
この場合はdisabled属性を設定していてfalseなのでフォームに値が入力ができるようになるという意味になります。
逆に11行目はフォームに値が入力できなくなるという意味です。
9行目〜12行目はフォーム1のラジオボタンをクリックした時でフォーム2の値を空っぽにして値の入力ができなくします。
13行目〜17行目はフォーム2のラジオボタンをクリックしたときでフォーム1の値を空っぽにして値の入力ができなくします。
19行目は画面を読み込んだ時に8行目のtoggleInputsメソッドが動作できるようにする為の設定です。
ラジオボタンの切り替えをした時にフォームに対する動作が起きるようにしますがその設定が20行目〜22行目です。