2014年3月26日水曜日

ボタンを押すことで、ラジオボタンやチェックボックスのdisabledを設定してみます。 よく使うのですが、よく使う割りに忘れてしまうのでおぼえがきです。
HTMLのサンプル
ラジオボタン :
jquery
java
php

チェックボックス:
jquery
java
php
ラジオボタンが3つとチェックボックスが3つ。
それぞれ「name」属性は同じにしてます。

jqueryのサンプル
$(document).ready(function(){
 //ラジオボタン用 disabled設定 or 解除
 $(document).on("click", "[name^='radiobutton']", function() {
  var name = $(this).attr('name');
  var flg = name.split('_')[1];
  if (flg == 'on') {
   //disabled
   $(":input[name^='radio_']").prop('disabled',true);
  } else {
   $(":input[name^='radio_']").prop('disabled',false);
  }
 });
 //チェックボックス用 disabled設定 or 解除
 $(document).on("click", "[name^='checkbutton']", function() {
  var name = $(this).attr('name');
  var flg = name.split('_')[1];
  if (flg == 'on') {
   //disabled
   $(":input[name^='check_']").prop('disabled',true);
  } else {
   $(":input[name^='check_']").prop('disabled',false);
  }
 });
});
ここでは「prop」を使っていますが、「attr」を使っても出来るみたいです。 ちなみに「attr」を使ってみると、
if (flg == 'on') {
 //disabled
 $(":input[name^='radio_']").attr('disabled','disabled');
} else {
 $(":input[name^='radio_']").removeAttr('disabled');
}
こんな感じです。
公式に「prop」と「attr」で取得できる値が異なることが記載されています。
http://api.jquery.com/prop/
中段くらいにある「Attributes vs. Properties」の一覧表です。
ラジオボタンとチェックボックス・・・分けなくてもよかったのですが。


サンプルページはこちら


0 コメント:

コメントを投稿

要望&問い合わせ

名前

メール *

メッセージ *