今回は選択不能とチェックボックスなどをデザイン

前回は疑似セレクトボックスの利用によって，セレクトのデザインを変更する方法をご紹介しました。今回は似たようなこととして，チェックボックスとラジオボタンのデザインを変更する方法をご紹介します。

それと今回はその前に，disabledを利用して，フォームの入力を制限する方法と，それをJavaScriptによって，切り替える方法をご紹介します。

まずは完成サンプルをみてください。

選択不能状態にしておくには，HTMLに「disabled="disabled"」を入れるとできます（次のサンプル参照⁠）⁠。しかし，それを選択可能状態にするにはJavaScriptで操作するしかありません。これをjQueryを使うと，さらに簡単に扱うことができるのです。

完成サンプルにいたるまで，順をおってみてきましょう。

disabled状態のフォーム

まずは実際にdisabled状態で，選択不能状態になっているものを今一度見てみましょう。

HTMLに直接disabled="disabled"をいれてあります。HTMLに直に書いてしまうと，JSがOFFの環境の人は入力できないままになってしまうことだけは注意が必要です。

ではまず，これを選択可能にするだけのボタンを入れてみましょう。

disabledを解除するボタン

ボタンを押したら選択可能状態にする仕組みを入れてみます。

jQuery(function($){
    $('button').click(function(){
        $(':disabled','#formDemo').removeAttr('disabled');
        return false;
    });
});

「<button>」のボタンを押すとdisabled="disabled"の属性を削除するサンプルです。

disabled状態になっている要素を取り扱う場合は，jQueryだと「:disabled」というフォーム用のフィルターがあります。（⁠参照：第2回）そのフィルターを利用して，あとはdisabledの属性を削除するだけです。属性の削除は「removeAttr」を使います。

.attr()でdisabledを削除例

removeAttrにてdisabledを削除するほうが確実ですが，「⁠.attr('disabled','')」を使うことでも対応可能です。

しかし，disabled自体不必要になるため，基本的にはremoveAttrを使って削除するほうがいいでしょう。