JQuery Select Input Fields Except Hidden

Jquery

Jquery Problem Overview


I have a row in a table which contains a checkbox and some other form fields (text boxes, hidden fields, select lists). When the checkbox is checked I want to disable all form fields in that row except for the hidden fields. I have this working for the most part, but I can't seem to ignore the hidden fields.

What is the best way to select all form fields in a table row but ignore hidden fields in the selection?

Jquery Solutions


Solution 1 - Jquery

$(":input:not([type=hidden])")

":input" is a jQuery pseudo selector... "Selects all input, textarea, select and button elements." http://api.jquery.com/input-selector/

Solution 2 - Jquery

Assuming by "hidden" you mean type="hidden" ie:

<input type="hidden" name="foo" value="bar">

then you can use the attribute not equals selector to do this:

$("tr input:checkbox").click(function() {
  var cb = $(this);
  var tr = $(this).closest("tr");
  if (cb.val()) {
    tr.find("input[type!='hidden']").attr("disabled", true);
  } else {
    tr.find("input[type!='hidden']").removeAttr("disabled");
  }
});

My general advice is avoid attribute selectors. They're slow. Give the relevant inputs (either the hidden ones or the not hidden ones) a class and then use that in the selectors.

If however you mean "hidden" as in "not visible" then use the :visible selector:

$("tr input:checkbox").click(function() {
  var cb = $(this);
  var tr = $(this).closest("tr");
  if (cb.val()) {
    tr.find("input:visible").attr("disabled", true);
  } else {
    tr.find("input:visible").removeAttr("disabled");
  }
});

Solution 3 - Jquery

You can also solve this using the hidden selector

$("input:not(:hidden)")

See also: jQuery hidden selector

Solution 4 - Jquery

I found a simple way of doing this in jquery.

$("tr input").not("input[type='hidden']")

In code snippet below, there is a div with an id of tabsDiv that contains multiple html elements and this code gets all input elements inside this div except those with type of hidden.

$("#tabsDiv").find("input").not("input[type='hidden']")

Solution 5 - Jquery

.........

$('tr input').attr('disabled', true)
$('tr input[type="hidden"]').removeAttr('disabled')

Solution 6 - Jquery

First, you need to tag your "selector" checkbox (e.g. with a class attribute "selector) so that it is clear that it is used for checking instead of regular form element. Then you use this:

$('table :checkbox.selector').click(function(ev) {
	$(ev.currentTarget)
			.parents('td').siblings('td')
			.find(':input:not([type=hidden])')
			.attr('disabled', ev.currentTarget.checked);
});

This solution works for all inputs (eg. select lists, textareas) and it doesn't disable the selector checkbox itself.

I'm assuming you use latest jQuery.

Solution 7 - Jquery

Just add a filter of visible which means it will take only input element which are visible to users.
This worked for me I am adding description for 30 char.

$("input:visible")

Solution 8 - Jquery

You can use this, it worked fine for me:

var $inputs = $('#formArticle :input:not(:hidden)');

formArticle is my form name.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBobView Question on Stackoverflow
Solution 1 - JqueryneikerView Answer on Stackoverflow
Solution 2 - JquerycletusView Answer on Stackoverflow
Solution 3 - JquerypmerelesView Answer on Stackoverflow
Solution 4 - JquerySunilView Answer on Stackoverflow
Solution 5 - JquerySarfrazView Answer on Stackoverflow
Solution 6 - JqueryMarko DumicView Answer on Stackoverflow
Solution 7 - JqueryEngineerView Answer on Stackoverflow
Solution 8 - Jqueryarmel sauvyView Answer on Stackoverflow