【jquery】jqueryを使って画面の全ての要素をdisabled設定する

会員登録画面や、編集画面などで規約に同意するチェックボックスをチェックしないと入力項目に入力できない
そんな画面の場合に、要素（入力項目）に対してdisabledを設定する方法があると思いますが、
要素が多いと面倒なので、jqueryを使って出来る限り簡素化しようと思います。

HTMLのサンプル

 同意する
 

  

   
お名前
   

  
  

   
お名前（カナ）
   

  
  

   
都道府県
   

    
     北海道
     東京
     大阪
    
   
  
  

   
住所
   

  
  

   
性別
   
男女
  
 

同意するチェックボックスのON/OFFで要素のdisabledを制御したいと思います。

JavaScriptのサンプル

$(document).ready(function(){
 setDisabled();
});
$(document).on("click", "[name='kiyaku']", function(e) {
 setDisabled();
});
function setDisabled() {
 if ($("[name='kiyaku']").prop('checked')) {
  //チェックONの場合
  $(":input").removeAttr("disabled");
 } else {
  //チェックOFFの場合
  $(":input").attr("disabled", "");
  //同意するチェックは対象外
  $("[name='kiyaku']").removeAttr("disabled");
 }
}

readyイベントとチェックボックスのclickイベントの時に「setDisabled」を呼ぶようにしています。

$(document).ready(function(){
 setDisabled();
});
$(document).on("click", "[name='kiyaku']", function(e) {
 setDisabled();
});

「setDisabled」では、チェックボックスのON/OFF状態により、要素のdisabled属性を変更しているのですが、

 //disabledを削除する場合
 $(":input").removeAttr("disabled");
 //disabledを付与する場合
 $(":input").attr("disabled", "");

上記のように各1行で全要素のdisabled属性を変更しています。

全要素なので、同意するチェックボックスまでdisabled属性が付与されてしまうので、 下記のように個別にdisabled属性を変更しています。

 $("[name='kiyaku']").removeAttr("disabled");

便利ですね。以上です。