jQuery その1　ラジオボックスでテキストボックスを入力させなくする

Webサービスを開発しているプログラマにjQueryの技術は必須だと感じてきました。
マスターになるため一歩一歩触れた技術をおさらいしていきます。

jQueryその1はラジオボックスを選択した時に、テキストボックスを入力できなくする方法です。

以下が、JS部分。

<script type="text/javascript">
  $(document).ready(function(){
	 $('#capacity_no_limit').click(function() {/* ←1*/
		 $("#capacity").attr("disabled","disabled").css("backgroundColor","#cccccc");/* ←2*/
	 });

	 $('#capacity_number').click(function() {/* ←3 */
		 $("#capacity").removeAttr("disabled").css("backgroundColor","#ffffff");/* ←4 */
	 });
});
</script>

以下スクリプトが、HTML部分。

<p>
  <input type="radio" id="capacity_number" name="capacity_flag" value="" class="radio"  />
  <input type="text" id="capacity" name="capacity" value="" class="textfield small"  /> 名
  <input type="radio" id="capacity_no_limit" name="capacity_flag" value="" class="radio" />無制限
</p>

サンプル

名
無制限

解説
1 : id=capacity_no_limitをクリックしたらfunction内部を実行します。
2 : id=capacityにdisalbed属性にdiabledを与えます。さらにCSSのバックグランドの色を#ccccccに変えます。
3 : id= capacity_numberをクリックしたらfunction内部を実行します。
4 : id= capacityのdisabled属性を除去します。さらにCSSのバックグランドの色を#ffffffに変えます。

以上です。

Hava a nice day.