【jquery】jqueryを使ってラジオボタンやチェックボックスのdisabled設定

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

HTMLのサンプル

ラジオボタン ：

jquery

java

php



チェックボックス：

jquery

java

php

ラジオボタンが３つとチェックボックスが３つ。
それぞれ「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」の一覧表です。
ラジオボタンとチェックボックス・・・分けなくてもよかったのですが。


サンプルページはこちら