Different jQuery Operations

Introduction

In this article, we will explore multiple ways to hide, show, and disable a control. We will be trying to handle multiple scenarios with their solutions. And, we will also explore new tricks to hide, show, and disable bulk of controls using jQuery.

Scenario 1

I have created a custom HTML table adding multiple different types of controls. Now, let’s say we want to show/hide bulk of control on specific rows.



Solutions

Hide

Hide 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 the 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 using the 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 the 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 controls. Now, let’s say we want to Enable/Disable the bulk of control on specific rows.

Solutions

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

Disable

Disable the first row of all controls.

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.

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 of all controls.

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.

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 types of controls. Now, let’s say we want to hide/show, Enable/Disable specific controls 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 the value to the first row, first City field.

Format

$("ContraolID1,# ContraolID2").hide();

Ex

$("#cityTr > [value='Mumbai']").attr("selected", "true");

O/P