jQuery フォームで特定の条件で選択不可にする

フォームを選択不可にして入力不可にするにはどうするかをメモ。

動作確認

input タイプのdisabled属性を設定する

例えばinputのタイプがテキストで選択不可にする場合は下記のようになる。

$(":text").attr("disabled","disabled");

再度選択可能にするにはdisabled属性をremoveAttrで削除する

$(":text").removeAttr("disabled");

セレクト要素で選択したvalue内容によって選択できなくなる条件をつけてみる

セレクト要素で選択した要素を取得するには「:selected」をセレクターに指定すればセレクト要素で選択された要素を取得できる

//セレクト要素で選択されたvalue属性を取得する
$(":selected").val();

下記のサンプルは年齢によって好きなタバコの銘柄の選択とテキストエリアを選択できなくするようチェンジイベントで補足する

$(document).ready(function(){
		$("select").change(function(){
				if($(":selected").val()=="10代"){
					$(":text").attr("disabled","disabled");
					$("select[name='names']").attr("disabled","disabled");
					}else{
						$(":text").removeAttr("disabled");
						$("select[name='names']").removeAttr("disabled");
						}
			});
});