Different operations Using JQuery like hide show disable and set specific value to html control

How to disable/enable an element with jQuery

In this jQuery tutorial we explore multiple ways to hide, show and disable control .We are trying to handle multiple scenarios with their solutions. We also explored new tricks to hide, show and disable bulk of controls using jQuery.


Scenario 1:
I have created a custom HTML Table. Adding multiple different type of control and let’s say that we want to show/Hide bulk of control on specific rows.

How to show hide an element using jQuery
How to show hide an element using jQuery




Solutions:
Hide: Hiding all the controls in the first row of the table using following script:

Format: $(“[TrID]”).find(“input,select,button,textarea”).hide();

Ex: $(“#Details”).find(“input,select,button,textarea”).hide();

Hiding all the controls in the previous row of the current selected row of the table using following script.

Format :$(“[LastTRID] “).find(“input,select,button,textarea”).hide();

Ex: $(“#LastRow”). prevAll().find(“input,select,button,textarea”).hide();

O/P:

How to disable/enable an element with jQuery
How to disable/enable an element with jQuery

Show: Showing all the controls of the hidden row with using following script:

Format: $(“[TrID]”).find(“input,select,button,textarea”).show();

Ex: $(“#Details”).find(“input,select,button,textarea”).show();

Showing all the controls in the previous row of the current selected row of the table using following script.

Format :$(“[LastTRID] “).find(“input,select,button,textarea”).show();

Ex: $(“#LastTr”). prevAll().find(“input,select,button,textarea”).show();

O/P:


enable disable html element using jquery
enable disable html element using jquery

Scenario 2:
I have created a custom HTML Table. Adding multiple different types of control and let’s say that we want to Enable/Disable bulk of control on specific rows.

Solutions:
prevAll() method searches through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements; the elements are returned in order beginning with the closest sibling.

Disable: Disable the first row all controls using following script:

Format: $(“[TrId] “).find (“input,select,button,textarea”).attr(‘disabled’, true);

Ex. $(“#Details”).find(“input,select,button,textarea”).attr(‘disabled’, true);

Disabling all the controls in the previous row of the current selected row of the table using following script.

Format :$(“[LastTRID] “).find(“input,select,button,textarea”). attr(‘disabled’, true);

Ex: $(“#LastTr”). prevAll().find(“input,select,button,textarea”). attr(‘disabled’, true);

O/P:



jquery disable element
jquery disable element

Enable: Enable the first row all controls using following script:

Format: $(“[TrId] “).find (“input,select,button,textarea”).attr(‘disabled’, false);

Ex.$(“#Details”).find(“input,select,button,textarea”).attr(‘disabled’, false);

Enabling all the controls in the previous row of the current selected row of the table using following script.

Format :$(“[LastTRID] “).find(“input,select,button,textarea”). attr(‘disabled’, false);

Ex: $(“#LastTr”). prevAll().find(“input,select,button,textarea”). attr(‘disabled’, false);

O/P:

jquery disable html element
jquery disable html element

Scenario 3:
I have created a custom HTML Table. Adding multiple different type of control and let’s say that we want to hide/show, Enable/Disable Specific of control and set dropdown dynamic value .

Solution:
Hide/Show: the last row Last Name and City field and first row Text area and City field using control ID.

Format: $(“ContraolID1,# ContraolID2”).hide();

Ex: $(“#lastname,#txtareaID,#Country,#city”).hide();

Enable/Disable the first row first Name and City field :

Format: $(“ContraolID1,# ContraolID2”).hide();

Ex: $(“#Firstname,#cityTr”). attr(‘disabled’, false);

Dynamically set value: Dynamically set value to first row first City field:

Format: $(“ContraolID1,# ContraolID2”).hide();

Ex: $(“#cityTr > [value=’Mumbai’]”).attr(“selected”, “true”);

O/P:

jquery set specific value using jquery
jquery set specific value using jquery


Hope this jQuery tutorial will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Akash Kumhar

I am Akash Kumhar a SharePoint Consultant.

View all posts by Akash Kumhar →