checkboxによる制御

checkboxによる制御 | よく使うjQuery

以前投稿したradioボタン制御と同じような内容でcheckboxの制御のサンプルを作成しました。
radioボタンの場合との違いは、checkboxの場合は複数あることを考慮して、「1つ以上checkedされたら」という条件を設けることです。

checkboxによる制御

■html


<div id="sample">
<label><input type="checkbox" /> テスト1</label>
<label><input type="checkbox" /> テスト2</label>
<label><input type="checkbox" /> テスト3</label>
<label><input type="checkbox" /> テスト4</label>
<label><input type="checkbox" /> テスト5</label>


<div><input type="text" disabled="disabled" value="入力不可" /></div>

</div>

<!--sample-->

■javascript

$(function() {
	$("#sample :checkbox").click(function() {
		if($("#sample :checked").length > 0) {
			$("#sample :text").attr('disabled', false);
			$("#sample :text").val('入力可');
		} else {
			$("#sample :text").attr('disabled', true);
			$("#sample :text").val('入力不可');
		}
	});
});

解説

イベントは何でもよいですが、今回は「checkboxをクリックしたら」とします。
「:checkbox」は全てのcheckbox要素を選択するセレクタです。

$("#sample :checkbox").click(function() {

↓if文による条件は”id名が「sample」の要素内で値が「checked」のものが0以上あったら”…つまり言い換えると”checkedのものがある場合は”となります。

if($("#sample :checked").length > 0) {

↓今回は、上記の条件を満たした場合、全てのtext要素の属性値「disabled」をfalseにし、valueの値を変更。テキストエリアへの入力を可能にします。

			$("#sample :text").attr('disabled', false);
			$("#sample :text").val('入力可');

↓そして条件を満たさなかった、つまり1つもチェックが入っていない場合は、初期の状態に戻します。

		} else {
			$("#sample :text").attr('disabled', true);
			$("#sample :text").val('入力不可');
		}

コメントを残すコメントをキャンセル