Как проверить стиль отображения элемента с помощью jquery

Question

Я работаю над приложением asp.net mvc3. В представлении a есть скрытое поле ввода с type="text", которое отображается при определенных условиях. Если условия выполнены и отображается поле, я хочу выполнить проверку на стороне клиента, если введен текст.

HTML-визуализации для ввода, когда он скрыт это:

<input class="yesNoNotApplicableTextbox" type="text" value="" style="display: none;" name="[14].FieldValue"> 

Когда вход стал виден в HTML изменения к этому:

<input class="yesNoNotApplicableTextbox" type="text" value="" style="" name="[14].FieldValue"> 

В моем .js файле у меня есть это:

$("input.yesNoNotApplicableTextbox[type='text'][style='display: none;']") 

Фактически, мне не нужно поле, если оно не видно, я просто хотел проверить, работает ли это, и это действительно работает. Но в соответствии с сгенерированным HTML, если я проверяю, видны ли входные данные следующим образом:

$("input.yesNoNotApplicableTextbox[type='text'][style='']") 

это не работает.

Как проверить, отображается ли поле ввода?

Answer 1

Это будет выбирать только элементы, которые соответствуют селектор и видны:

$("input.yesNoNotApplicableTextbox[type='text']:visible") 

Разница между :visible и .is(':visible') это:

:visible
Me: эй JQuery, дай мне все элементы, которые соответствуют селектор и видимы.
jQuery: Хорошо, вот элементы.

.is(':visible')
Me: hey jQuery, дайте мне все элементы, соответствующие этому селектору.
jQuery: вот те элементы, которые вы запросили.
Me: Хорошо, теперь дайте мне элементы из этого списка, которые видны.

Из jQuery docs:

Описание: Выбирает все элементы, которые видны.

Элементы считаются видимыми, если они потребляют пространство в документе. Видимые элементы имеют ширину или высоту, которая больше нуля.

Answer 2

$("input.yesNoNotApplicableTextbox[type='text']:hidden") //hidden ones 

$("input.yesNoNotApplicableTextbox[type='text']:visible") //visible ones 

Answer 3

$("input.yesNoNotApplicableTextbox[type='text']").is(":visible") 

Answer 4

if($("input.yesNoNotApplicableTextbox[type='text']").is(':visible')){ 
    alert("Visible"); 
} 

Answer 5

Используйте :visible selector:

$("input.yesNoNotApplicableTextbox[type='text']:visible")