Issue when disabling input elements of a form

[r2ferna]

Hi !

I need to disable a form. So, I'm trying to disable all input elements.

Code:

$("#fm :input").prop("disabled", true);

It's ok for "basic" elements, easyui-validatebox and easyui-numberbox but it fails for easyui classes like easyui-combobox, easyui-datebox and easyui-searchbox.
The text-box part is disabled as expected but the arrow-box part is active yet!!

Disabling combo-boxes and date-boxes with its methods

Code:

$('#inpPt').combobox('disable'); $('#inpFeDesde').datebox('disable');

all goes ok! (full element is disabled)

I have many combo and date boxes, so I would not like to disable one by one or traversing all input elements for checking its class type and apply the corresponding method.

How can I extend (if it's possible) the combo and date classes so they can be proper disabled?

Thanks for your help!

[stworthy]

Please try to extend a 'disable' method for form.

Code:

<script>
$.extend($.fn.form.methods, {
	disable: function(jq){
		return jq.each(function(){
			var t = $(this);
			t.find('input')._propAttr('disabled','disabled');
			var plugins = ['combo','combobox','combotree','combogrid','datebox','datetimebox','spinner','timespinner','numberbox','numberspinner','slider'];
			for(var i=0; i<plugins.length; i++){
				var plugin = plugins[i];
				var r = t.find('.'+plugin+'-f');
				if (r.length && r[plugin]){
					r[plugin]('disable');
				}
			}
			t.form('validate');
		})
	}
})
</div>

Now you can simply call 'disable' method to disable a form.

Code:

$('#fm').form('disable');

[r2ferna]

Thanks stworthy.

The extended 'disable' method works fine !!

Now, I'm facing another issue...
How can I enable/disable the easyui-searchbox? I mean enable/disable the "searchbox-button", the textbox part is not the problem.

Tanks in advance.

[stworthy]

The 'disable' and 'enable' methods of searchbox plugin will be supported since next version. Please download the preview plugin from http://www.jeasyui.com/easyui/plugins/jquery.searchbox.js and include it to the page.

[devnull]

Hi;

Looks like this feature is not in the current version ??

anyway, I have extended the form and added a enable as well as the ability to omit a particular (key) field using it's class name or id etc:

Code:

$.extend($.fn.form.methods, {	
	enable: function(jq){
    jq.form('disable','enable')	
  },
  	
	disable: function(jq,omit){
		console.log(mode);
		var omit = '' || omit, mode = 'disable';
		if(omit == 'enable') mode = 'enable';
		
		return jq.each(function(){
			var t = $(this);
			//t.find('input').not(omit)._propAttr('disabled','disabled');
			var plugins = ['combo','combobox','combotree','combogrid','datebox','datetimebox','spinner','timespinner','numberbox','numberspinner','slider','validatebox'];
			for(var i=0; i<plugins.length; i++){
				var plugin = plugins[i];
				var r = t.find('.'+plugin+'-f').not(omit);
				if (r.length && r[plugin]) r[plugin](mode);
			}
			t.form('validate');
		})
	}
})

$('#xx').form('disable','.fkey');
$('#xx').form('disable','enable');

But it does not seem to be quite right, on some forms one or 2 elements don't get DISABLED, on other forms most fields are not disabled, and I cannot seem to track down the cause !



  


 

[devnull]

This now works now on textboxes & validateboxes , although it may not be the most efficient method:

Code:

$.extend($.fn.form.methods, {	
	enable: function(jq){
    jq.form('disable','_enable_')	
  },
  	
	disable: function(jq,omit){
		var omit = '' || omit, mode = 'disable';
		if(omit == '_enable_') mode = 'enable';
		return jq.each(function(){
			var t = $(this);
			var plugins = ['textbox','combo','combobox','combotree','combogrid','datebox','datetimebox','spinner','timespinner','numberbox','numberspinner','slider','validatebox'];
			for(var i=0; i<plugins.length; i++){
				var plugin = plugins[i];
				if(plugin=='validatebox') {
          var r = t.children().find('.easyui-validatebox').not(omit);
          if (r.length) {
            if(mode=='enable') r.removeAttr('disabled');
            else r.attr('disabled','disabled');
          }
  		  }
				else {
  				var r = t.children().find('.'+plugin+'-f').not(omit);
          if(r.length && r[plugin]) r[plugin](mode);
        }				
			}
			t.form('validate');
		})
	}
})

Could this be added as a standard method for forms ?