Show/Hide/Disable HTML Controls using jQuery

In this jQuery tutorial, we explore multiple ways to hide, show and disable HTML controls using jQuery.

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.

Solutions

Hide: Hiding all the controls in the first row of the table using the 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:

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:

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:

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:

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:

You may like following jQuery tutorials:

• Update People Picker Group field using Rest API and jQuery in SharePoint
• jQuery Tooltip using Visual Studio
• Send Email with jQuery and REST API in SharePoint
• Upload attachment to new item on list using REST API JQuery in SharePoint 2013
• SharePoint 2013 Arranging Choice Field CheckBoxes on SharePoint Forms using jQuery
• Add jQuery in visual web part in SharePoint
• SharePoint 2013: Show/Hide Delete Icon In Ribbon On List Item Selection using jQuery
• Bind SharePoint list data using jQuery datatable using content search web part in SharePoint
• Get dropdown selected value and text using jquery in SharePoint Online
• CRUD operations in SharePoint 2013 list using Web Services and jQuery
• Show paging at top in list view web part in SharePoint 2013/2016/Online using jQuery

This jQuery tutorial we discussed, how to show HTML elements using jQuery, how to hide HTML elements using jQuery, how to disable HTML elements using jQuery.