読者です 読者をやめる 読者になる 読者になる

jQueryとjQuery mobileでボタンの有効・無効を切り替える

jQueryを利用する場合も、jQuery mobileを利用する場合も、ボタンは

<input id="myButton" type="button" value="OK" />

のように記述するかと思います。


ただし、jQuery mobileを利用した場合はdivタグなどに変換されます。


ボタンの有効・無効をJavaScript内で変更する場合、
PC/mobileを気にせずに使いたい場面があったため、
jQueryプラグイン(?)を作って見ました。

(function($) {
    $.fn.disableButton = function() {
        if (this.button) {
            // jQuery mobileの場合
            this.button('disable');
            this.button('refresh');
        } else {
            // jQueryの場合
            this.attr({
                disabled: "disabled",
            });
        }
        return this;
    }
    
    $.fn.enableButton = function() {
        if (this.button) {
            // jQuery mobileの場合
            this.button('enable');
        } else {
            // jQueryの場合
            this.removeAttr("disabled");
        }
        return this;
    }
})(jQuery);


で、使いたいときは

$(function() {
    $('myButton').disableButton();
});

で、無効に出来ました。