[jQuery]フォームのチェックボックスでテキストボックスの入力可・不可を操作する

フォーム処理で、チェックボックスでチェックした場合のみ補足項目を入力させたい場合のコード例です。

今回は以下のフォームを例に、果物名をチェックした場合のみその果物の数量が入力できるようにします。

HTML

<div>
	<input type="checkbox" id="apple" class="switch">りんご
	<input type="number" id="apple_add" class="inputbox" disabled="disabled"> 個</td>
</div>

<div>
	<input type="checkbox" id="melon" class="switch">メロン
	<input type="number" id="melon_add" class="inputbox" disabled="disabled"> 個</td>
</div>

<div>
	<input type="reset" id="reset">
</div>

※補足

1. 数量欄のidは、"チェックボックスのid" + "_add" と指定します。
2. チェックボックスと数量欄にはそれぞれ "switch" と "inputbox" というclassをつけています。
3. リセットボタンにもid="reset"をつけてください。

JavaScript

$('.switch').each(function(){			//class'switch'(=チェックボックス)
	var idname = $(this).attr('id');	//class'switch'(=チェックボックス)のidから入力可・不可にする入力欄を指定
	var addInput = '#'+idname +'_add';

	/* 既にチェックされていた場合の処理 */
	if($(this).prop('checked')){
		$(addInput).removeAttr('disabled').removeClass('none');
	}

	$(this).click(function(){
		/* チェック時の処理 */
		if($(this).prop('checked')){
			$(addInput).removeAttr('disabled').addClass('active').removeClass('none').focus();
			//入力可能に変更し、class'active'を付与し、フォーカスさせる

		/* チェックをはずした時の処理 */
		} else {
			$(addInput).attr('disabled','disabled').removeClass('active').addClass('none').blur();
			//入力不可に変更し、class'active'を外して'none'を付与し、フォーカスを外す
		}
	});

	/* フォーカスが外れた時 */
	$(addInput).blur(function(){
		$(addInput).removeClass('active');
	});

	/* 他のオプションをクリックしたときの処理 */
	$('.switch').not(this).click(function(){
			$(addInput).removeClass('active');
	});
});

/* リセットで↑条件をリセット */
$('#reset').click(function() {
	$('.switch').attr('checked',false);
	$('.inputbox').val('').attr('disabled','disabled').removeClass('active').addClass('none');

});

CSS

/* 入力不可状態のスタイル */
.inputbox.none {
	background-color: #ddd;
}

/* フォーカスされた時のスタイル */
.inputbox.active {
	background-color:#FFF8E1;
	color: #000;
	box-shadow:0px 0px 5px rgba(84,189,245,1);
}

入力可・不可の状態別にスタイル指定してあげると、チェック時に以下のように数量の欄が目立つのでユーザーの見逃しも防げます。

以上です。

チェックボックスとテキストボックスのidを法則にしたがってつければいくつでも対応します。

テキストボックスのidを指定して入力の可・不可を操作する方法は他にも見つかりますが、複数の項目に同じ処理を施したい場合は、この例のようにidに法則性を持たせてまとめて処理すればOKです。