jquery - UI ウィジェットの無効化

Question

ウィジェットを作成していますが、ボタンをクリックするとウィジェットが無効になります。

(function ($) {
    $.widget("df.txt", { })
})(jQuery);

$(document).ready(function () {
    //register input widgets
    $("input").txt({ disabled: true });


    //Register button to disable/enable inputs
    $("button").click(function () {
        //$("input").txt("disable");
        $("input").txt("option", "disabled", true);
    });
});

このリンクを参考にしています。

うまくいきません。

Answer 1

これを試して

  $('input').attr("disabled", true);

 or

 $('input').attr("disabled", 'disabled');

ここでは、無効になっている属性をtrueに設定しています。

Answer 2

disabled基本ウィジェットは、オプションが変更されたときに一部のクラスのみを切り替えます。

カスタム ウィジェットが拡張する要素を実際に無効にしたい場合は、_setOption()メソッドをオーバーライドして、その操作を明示的に実行する必要があります。

(function($) {
    $.widget("df.txt", {
        _setOption: function(key, value) {
            this._super(key, value);
            if (key == "disabled") {
                this.element.prop("disabled", !!value);
            }
        }
    });
})(jQuery);

次に、次のように書くことができます。

// Register button to disable/enable inputs.
$("button").click(function() {
    var $inputs = $("input");
    $inputs.txt("option", "disabled", !$inputs.txt("option", "disabled"));
});

Answer 3

_setOption: function (key, value) {

            if (key === "disabled") {
                if (value) { this._Disable(); }
                else { this._Enable(); }
            }

 _Enable: function () {
            this.element.removeAttr("disabled");
            this.element.addClass("enable");
        },

        _Disable: function () {
            this.element.attr("disabled", "disabled");
            this.element.removeClass("enable");
        }