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

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

この記事を読むのに必要な時間:およそ 6 分

ラジオボタンで切り替え

ここまで,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を使うことで,フォームの内容などを簡単に保持することができるので,ぜひ他でも活用してみてください。

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

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/