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); 
    }); 
}); 

我使用這個link作爲參考。

這不起作用，有幫助嗎？

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"); 
     }