如何从jQuery选择器中排除不可见的元素?

时间:2015-09-09 11:54:43

标签: jquery

我有一个带有复选框的表单元素,其中包含“昵称”切换字段。我验证所有字段都不是空白,并在所有字段输入值后在页面上启用按钮。

但是,我有一些输入字段对用户不可见,因为它们位于具有<div> CSS属性的display:none;元素内。如何在jQuery中排除这些元素,只对可见的字段执行验证?

HTML

<input name="cvv" type="text">
<span class="checkbox"></span>
<p>Save this card for faster transactions<br>Note: Your CVV number will not be stored</p> 
<div class="col-md-6 nicknameBlock" id="nickNameToggle">    
    <input name="" type="text" placeholder="Nick Name" class="textbox textbox50 required">
</div>
<div class="row center">
    <a href="javascript:" class="bt btblue disableClick" id="submitBtn">
    <img src="images/icon_pay.png" > PAY</a>
</div>

CSS

.nicknameBlock{
  display:none;
}

的JavaScript

activatePayButton('submitBtn'); 
function activatePayButton(formId){
    $form = $('#'+formId);     
    $form.find(':input').on('change keyup blur', function(event) {
        var disable = false;      
        $form.find("input[type!='hidden']").each(function(i, el) { 

        });
    });
}

2 个答案:

答案 0 :(得分:3)

好!让我们逐行采取:

activatePayButton('submitBtn'); // this is the id of anchor which has img
 function activatePayButton(formId){
     $form = $('#'+formId);  // so this selector selects the anchor not form element   
     $form.find(':input').on('change keyup blur', function(event) { 
    // as $form is an anchor which has only img as child
    // you don't have any input to bind any event on it
       var disable = false;      
       $form.find("input[type!='hidden']").each(function(i, el) { 
          // that is why this doesn't get executed.
       });
     });
 }

答案 1 :(得分:1)

这很简单,真的

if($(".nicknameBlock").is(":visible")) { alert("Im visible now") }