1. Home
  2. Forum
  3. jQuery
  4. Disable inputs

Disable inputs

Hello Syncfusion Support Team,

I have an issue in disable multiple inputs of different type at the same time
Example:
$("#test1").ejDropDownList({
enabled: true
});
$("#test2").ejNumericTextbox({
enabled: true
});
function disableDropDown(){
$("#test1").ejDropDownList({
enabled: false
});
}
function disableNumericTextbox(){
$("#test2").ejNumericTextbox({
enabled: false
});
}
My question is how to get the type of an input , in order to create one dynamic function that takes the type of each input and disable them in one click
Thank you.

5 Replies 1 reply marked as answer
KR Keerthana Rajendran Syncfusion Team September 7, 2020 09:21 AM UTC

Hi Ali,  

Thanks for contacting Syncfusion support.  

Our EJ1 components element rendering structure varies for each component and disable class will be added for different elements based on the control structure. For this purpose , we have direct methods in corresponding controls to disable the controls dynamically. You can directly invoke these methods inside single dynamic function and disable the required controls.  

Refer to the following code 

function disable() 
      { 
        $("#test1").ejDropDownList("disable"); 
        $("#test2").ejNumericTextbox("disable"); 
      } 

Refer to the sample below  


UG links:  



You can also take instance of control and invoke methods from this instance. Refer to the below UG 


If we have misunderstood, please revert us with clear details on your requirement to proceed further.  

Please let us know, if you need further assistance. 

Regards, 
Keerthana.  


AO Ali Ossaily September 7, 2020 04:02 PM UTC

Dear Keerthana, 

Thank you for reply, but I was wondering if I have 20 inputs with different types. Should I add the 20 inputs to the function in order to disable them all. 

For example, let's say I have 4 inputs

("#test1_mytest" ).ejDropDownList({
enabled: true
});
$("#test2_mytest").ejNumericTextbox({
enabled: true
});
("#test3_mytest").ejMasjEdit({
enabled: true
});
$("#test1_mytest" ).ejDatepicker ({
enabled: true
});

My question is how I can disable all the inputs above that has Id's ends with'_mytest' with only one dynamic function that takes the id and the type of the input 

Regards, 


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 8, 2020 06:45 AM UTC

Hi Ali, 
 
We have checked your expected requirement of disabling EJ input components dynamically within a single function. 
 
As mentioned in our previous update, element structure of every EJ component will differ from one another. So, we cannot commonly apply a common element level solution (by checking id and add attribute to disable) to disable the EJ input components. Due to this reason, we provided solution of disabling the components using their disable method. 
 
Since, you are expecting to disable multiple components (20 components) dynamically using single function, we have prepared a solution to achieve that requirement. In the solution, we get the elements with component class names like e-datepicker which would be present in all EJ DatePicker component’s element, using that class we disable all the DatePicker available in the page. Similarly, we disable all the EJ input components in the page. 
 
Please, refer the solution sample below. 
 
 
function disable() { 
      var controlClassName = ['e-numerictextbox', 'e-dropdownlist', 'e-datepicker', 'e-maskedit']; 
      for (var j = 0; j < controlClassName.length; j++) { 
        var currentInput = document.getElementsByClassName(controlClassName[j]); 
        if (currentInput.length > 0) { 
          for (var i = 0; i < currentInput.length; i++) { 
            if (controlClassName[j] == 'e-numerictextbox') { 
              $("#" + currentInput[i].id).ejNumericTextbox('disable'); 
            } else if (controlClassName[j] == 'e-dropdownlist') { 
              $("#" + currentInput[i].id).ejDropDownList('disable'); 
            } else if (controlClassName[j] == 'e-datepicker') { 
              $("#" + currentInput[i].id).ejDatePicker('disable'); 
            } else if (controlClassName[j] == 'e-maskedit') { 
              $("#" + currentInput[i].id).ejMaskEdit('disable'); 
            } 
          } 
        } 
      } 
    } 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


Marked as answer
AO Ali Ossaily September 9, 2020 05:16 PM UTC

Thank you, this is good solution

MK Muthukrishnan Kandasamy Syncfusion Team September 10, 2020 04:24 AM UTC

 
Hi Ali, 
 
Thanks for the update. 
 
We are glad to know that given solution works. Please let us know if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


Loader.
Up arrow icon