もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第13回今すぐできる!ユーザビリティを向上させるフォーム操作実践(5)デザインされたチェックボックスを実装する

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

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

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

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

画像

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

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

disabled状態のフォーム

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

disabled状態のフォーム
disabled状態のフォーム

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

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

disabledを解除するボタン

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

disabledを削除するボタン部分のScript
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を使って削除するほうがいいでしょう。

ラジオボタンで切り替え

ここまで、disabled属性を削除する方法を見てもらいました。先ほどのは、ボタンで削除しましたが、先ほどのScriptでは一度disabled属性を削除した後に再びdisabledを付加する機能をつけていないので、交互に切り替えることができません。そこで今度はボタンではなく、ラジオボタンにdisabledの削除・付加を切り替えるScriptをつけて、選択不能・可能状態を切り替えをしてみようと思います。

先ほどまでにサンプルに、下記のHTMLを追加したものを利用します。

切り替え部分のHTML
<tr>
    <th class="check">入力可否</th>
    <td class="check">
        <input name="disabledRadio" type="radio" id="disabledRadio" checked="checked" />
        <label for="disabledRadio">入力不可</label>
        <input type="radio" name="disabledRadio" id="enabledRadio" value="" />
        <label for="enabledRadio">入力可</label>
    </td>
</tr>

そして切り替えをするScriptです。

切り替えScript
jQuery(function($){
    $('#disabledRadio').attr('checked','checked');
    $('input,select','#formDemo').not('[name=disabledRadio]').attr('disabled','disabled').val('');
    $('input[name="disabledRadio"]:last').click(function(){
        $(':disabled','#formDemo').removeAttr('disabled');
    });
    $('input[name="disabledRadio"]:first').click(function(){
        $('input,select','#formDemo').not('[name=disabledRadio]')
            .attr('disabled','disabled').val('');
    });
});

最初の部分は初期状態にするリセットのようなもので、ラジオボタンのチェックを元にもどすのと、フォームの入力内容削除とdisabledをセットしなおしています。ここは単にブラウザによっては、一度入力をしてしまうと、リロード時に内容を保持してしまうのを元に戻す処理なので、特になくても問題はありません。

あとは、⁠$('input[name="disabledRadio"]:last')」にて、ラジオボタンの2つあるうちの下の方を選択した時の処理と、⁠$('input[name="disabledRadio"]:first')」で上の方を選択した時の処理を入れておきます。

入力可をチェックした際は、⁠removeAttr」でdisabledを削除する機能をいれ、入力不可に戻したときは、⁠.attr('disabled','disabled')」で再びdisabled属性を付加させ、それとともに、入力の値を「.val('')」にて削除します。

今回はラジオボタンでの切り替えにしたため、その部分はdisabledに付加しないように「.not('[name=disabledRadio]')」をつけています。

シンプルな機能であれば、上記のScriptで十分です。しかし、入力した内容を削除してしまう機能を入れてるため、入力後に再度戻すと、内容が削除されてしまいます。その後、また入力可能に戻した際に、先ほど入力していた内容を復元させるほうが、ユーザーにとって親切ではあるので、最後はその機能を追加したサンプルをご紹介します。

入力内容の一時保存

入力内容を一時保存しておく方法はcookieを使うなどの方法も考えられますが、今回はjQueryのdataを利用してみることにします。

dataメソッドは、指定した要素に情報を持たせたり、その情報を引き出したりするものです。

切り替えScript+入力一時保持
jQuery(function($){
    $('#disabledRadio').attr('checked','checked');
    $('input,select','#formDemo').not('[name=disabledRadio]').attr('disabled','disabled').val('');
    $('input[name="disabledRadio"]:last').click(function(){
        $(':disabled','#formDemo').each(function(){
            $(this).removeAttr('disabled');
            if($(this).data('valueLog')){
                $(this).val($(this).data('valueLog'));
            };
        });
    });
    $('input[name="disabledRadio"]:first').click(function(){
        $('input,select','#formDemo').not('[name=disabledRadio]').each(function(){
            $(this).data('valueLog',$(this).val())
                .attr('disabled','disabled').val('');
        });
    });
});

各セレクタに、dataを使ってinputに入力した内容を一時的に保持させる為に、先ほどのサンプルとは違い、eachを利用してそれぞれの要素に対して各種メソッドを実行します。

今回の例で言うと、各要素に「valueLog」という名前で保持され、保持されている内容は、Firebug+FireQueryで確認することができます。

disabled状態の解除
disabled状態の解除

一度入力して、ラジオボタンを入力不可に戻した後にFirebugでその要素を確認してみて下さい。表面上はテキストは削除されていますが、要素にひも付いて情報を保持しているのを確認することができます。

dataを使うことで、フォームの内容などを簡単に保持することができるので、ぜひ他でも活用してみてください。

さて、選択不能・可能状態の切り替え例はここまでです。次はラジオボタンやチェックボックスのデザインを変更してみる簡単な実践例をご紹介いたします。

ラジオボタンのデザイン変更

ラジオボタンやチェックボックスもJavaScriptを使うことで、疑似的にデザインを変更して扱うことが可能になります。

擬似的というのは、実際のinputを扱うのではなく、imgの画像を代わりに利用し、そこにクリックなどのイベントを追加することで、擬似的にラジオボタンやチェックボックスの動作を実現しています。

使用した画像

ラジオボタン画像
ラジオボタン画像 ラジオボタン画像
ラジオボタンのデザイン変更
jQuery(function($){
    var img = 'images/radio.gif',
         img_on = 'images/radio_on.gif';
    $(':checked').removeAttr('checked');
    $('.radioImg input:radio').hide().after('<img src="' + img + '" />');
    $('.radioImg input:radio:hidden').next().click(function(){
        $('.radioImg :checked').removeAttr('checked');
        $(this).attr('src',img_on)
                .siblings().attr('src',img);
        $(this).prev().attr('checked','checked');
    });
    $('label').click(function(){
        $(this).prev().trigger('click');
    });
    /*以下おまけ*/
    $('button').click(function(){
        if($('[name="gender"]:checked').length > 0 && $('[name="gender2"]:checked').length > 0){
            alert('チェックされた値は「' + $('[name="gender"]:checked').val() + '」と「' + $('[name="gender2"]:checked').val() + '」');
        }else {
            alert('チェックされていない項目があります');
        }
    });
});
画像
FirebugでのHTML表示
FirebugでのHTML表示

今回はimg要素の追加もJavaScript側で設定してあり、実際のinputはその画像の直前にあり、非表示状態にしてあります。

Scriptの最初の部分(5行目)でデフォルトのラジオボタンを.hide()で非表示にし、その非表示にしたラジオボタンの直後に.after()でIMG要素を追加しています。ラジオボタンの場合は、チェックされている箇所は常に一カ所のみなので、クリックした部分の画像をだけ、チェックされた画像に変化をさせ、他の画像は初期状態に戻すScriptを入れます。今回のサンプルHTMLでは、ラジオボタンを全て同階層においたので、.sibilings()で対応しています。

label部分をクリックした際は、.trigger('click')を利用して、ラジオボタンがクリックされた動作を実行するようにします。

今回画像の切り替えのURLはスクリプト内で変数に入れて実行してありますが、この例だと汎用性は高くはありません。画像のURLを指定せずとも使えるようにするためには、Scriptを工夫するもしくはCSSで対応するなどの必要があります。

チェックボックスのデザイン変更

ラジオボタン同様に、チェックボックスも疑似チェックボックスとすることで、デザインを変更することが可能です。

使用した画像

チェックボックス画像
チェックボックス画像 チェックボックス画像
チェックボックスのデザイン変更
jQuery(function($){
    var img = 'images/check.gif',
         img_on = 'images/check_on.gif';
    $(':checked').removeAttr('checked');
    $('.checkImg input:checkbox').hide().after('<img src="' + img + '" />');
    $('.checkImg input:checkbox:hidden').next().toggle(function(){
        $(this).attr('src',img_on);
        $(this).prev().attr('checked','checked');
    },function(){
        $(this).attr('src',img);
        $(this).prev().removeAttr('checked');
    });
    $('label').click(function(){
        $(this).prev().trigger('click');
    });
    /*以下おまけ*/
    $('button').click(function(){
        var colorElm ='',
        colorElm2 = '';
        $('[name="color"]:checked').each(function(){
            colorElm += $(this).val();
        });
        $('[name="color2"]:checked').each(function(){
            colorElm2 += $(this).val();
        });
        alert('チェックされた値は「' + colorElm + '」と「' + colorElm2 + '」');
    });
});
画像
FirebugでのHTML表示
FirebugでのHTML表示

基本は先ほどの疑似ラジオボタンと同じですが、クリックでの動作はそれぞれ個々のチェックボックスでの動作となるので、ここでは「.toggle(fn,fn)」を利用しています。

前回のセレクトボックスでもそうですが、フォームの各要素に代替する機能を持った要素を追加することで、それらを擬似的に表示できるので、様々な凝ったデザインをすることが可能なのです。その際のScriptは汎用性を持たせるかどうかで、作り方も変わってきますが、単純に今回のような作りでも代替可能です。きれいなフォームを利用したいという時などに活用してみてはいかがでしょうか。

おすすめ記事

記事・ニュース一覧