【jQuery】プルダウン選択時に値を変更するか確認する

プルダウン選択で値を変更する前に、確認

【bootstrap3】を使ったWeb開発で、
複数のフォーム要素をselect要素の値によって有効・無効を切り替えるといった実装をしているときに、
フォームの値が変更されている際、プルダウンが変更された時に変更を確認するモーダルメッセージを表示する処理を書きました。
今後も同じような実装をするかもしれないので、備忘録として。

参考はこちらのページです。↓
https://shironeko.hateblo.jp/entry/2014/07/12/120618

<style>
    fieldset {
        display: block;
    }
    fieldset:disabled {
        display: none;
    }
</style>

<form>
    <label class="form-label">月</label>
    <select name='month' id="form_select">
        <option value="202301" selected>2023/01</option>
        <option value="202302">2023/02</option>
        <option value="202303">2023/03</option>
        <option value="202304">2023/04</option>
    </select>
    <fieldset data-month='202301'>
        表示するフォーム要素
    </fieldset>
    <fieldset data-month='202302' disabled>
        隠すフォーム要素
    </fieldset>
    <fieldset data-month='202303' disabled>
        隠すフォーム要素
    </fieldset>
    <fieldset data-month='202304' disabled>
        隠すフォーム要素
    </fieldset>
</form>

<div class="modal fade" id="ChangeAlert" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
				<h4 class="modal-title">確認</h4>
			</div>
			<div class="modal-body">
				変更が保存されていません。<br>
				表示を切り替えますか？
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">いいえ</button>
				<button type="button" class="btn btn-primary" id="btn-change"  data-dismiss="modal">はい</button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="sample.js"></script>

sample.js

(function() {
    $.fn.exChange = function (callback, fn) {
		let func = fn || function() { return $(this).val(); };
		$(this).each(function() {
			let val = func.apply(this);
			$(this).change(function() {
				Array.prototype.push.call(arguments, val);
				callback.apply(this, arguments);
				val = func($(this));
			});
		});
    }
    $("#form_select").exChange(selectChange);
})();

function selectChange(e, prev) {
	let value = e.target.value;
	if (#変更を確認する条件#) {
		$("#ChangeAlert").modal();
		$("#btn-change").on("click", function() {
			for (let i = 0; i < $("fieldset").length; i++) {
				let fieldset = $("fieldset").get(i);
				if ($(fieldset).data('month') == value) {
					$(fieldset).prop('disabled', false);
				} else {
					$(fieldset).prop('disabled', true);
				}
			}
			$("#form_select").val(value);
		});
		return $("#form_select").val(prev);
	}

	for (let i = 0; i < $("fieldset").length; i++) {
		let fieldset = $("fieldset").get(i);
		if ($(fieldset).data('month') == value) {
			$(fieldset).prop('disabled', false);
		} else {
			$(fieldset).prop('disabled', true);
		}
	}
	return $("#form_select").val(value);
}