如何使用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']:hidden") //hidden ones

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

Answer 2

这将只选择与选择器匹配且可见的元素：

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

:visible和.is(':visible')之间的差异是：

:visible
我：嘿jQuery，给我所有与这个选择器匹配且可见的元素 jQuery：好的，这是元素。

.is(':visible')
我：嘿jQuery，给我所有与这个选择器相匹配的元素 jQuery：这是你要求的元素 我：好的，现在给我这个列表中可见的元素。

来自jQuery docs：

  

描述：选择所有可见的元素。

     

如果元素占用文档中的空间，则认为元素是可见的。可见元素的宽度或高度大于零。

Answer 3

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

Answer 4

使用:visible selector：

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

Answer 5

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