禁用提交按鈕，直到所有隱藏的輸入有一個值

Question

我有一個隱藏輸入的簡單表單，我試圖檢查每個隱藏的輸入是否有一個值。如果所有隱藏的輸入都有一個值，而不是禁用或啓用提交按鈕。一旦用戶通過jquery點擊圖像，輸入就會被填充。香港專業教育學院嘗試多種方式，它看起來像我想的東西....

<form method="post" action="test.php"> 
    <div class="selections" id="accordion"> 
     <h3>title<div class='status'>Pending</div></h3> 
     <div class='select-form'> 
      <div class='images'> 
       <img src='images/vote.jpg' data-value='data-value'> 
       <br/><span>title</span><br/>description 
      </div> 
      <input type='hidden' class='image-value' name='1' value=''> 
     </div> 
     <div class='select-form'> 
      <div class='images'> 
       <img src='images/vote.jpg' data-value='data-value2'> 
       <br/><span>title</span><br/>description 
      </div> 
      <input type='hidden' class='image-value2' name='2' value=''> 
     </div> 
    </div> 
    <input id="submit_button" type="submit" class="submit" value="SUBMIT"> 
</form> 

的JavaScript去如下：

$(document).ready(function() { 
    var $submit = $("input[type=submit]"), 
     $inputs = $('input[type=hidden]'); 

    function checkEmpty() { 

     // filter over the empty inputs 

     return $inputs.filter(function() { 
      return !$.trim(this.value); 
     }).length === 0; 
    } 

    $inputs.on('blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).blur(); // trigger an initial blur 


}); 

什麼想法？

Answer 1

你可以只調用checkEmpty()上img.click()，並從該函數處理禁用狀態。

嘗試一下這裏：JSFiddle（點擊圖片）

$(document).ready(function() { 
    var $submit = $("input[type=submit]"), 
     $inputs = $('input[type=hidden]'); 

    function checkEmpty() { 
     var res = true; 
     $inputs.each(function(i,v){ 
      if(v.value == ""){ 
       res = false; 
       return false; 
      } 
     }); 

     $submit.prop("disabled", !res);  
    } 

    $("img").click(function(){ 
     $(this).parent().parent().find("input[type=hidden]").val("sdf"); 
     checkEmpty(); 
    }); 

    checkEmpty(); //set disabled onload 
}); 

Answer 2

，你接受你的裝飾功能不正常，請刪除它像here :

function checkEmpty() { 
    // filter over the empty inputs 
    return inputs.filter(function() { 
     return !(this.value); 
    }).length === 0; 
} 

Answer 3

將這個模糊函數內，以找出是否所有隱藏的投入有一個非空值。

var empty=false; 
$('input[type=hidden]').each(function(){ 
if($(this).val()==""){ 
empty=true; 
} 
}); 
if(empty){ 
//DISABLE SUBMIT 
} 

Answer 4

當您不應該使用JavaScript變量時，您正在使用$。工作小提琴：http://jsfiddle.net/keliix06/2f3cv2pk/

$(document).ready(function() { 
    var submit = $("input[type=submit]"), 
     inputs = $('input[type=hidden]'); 

    function checkEmpty() { 

     // filter over the empty inputs 

     return inputs.filter(function() { 
      return !$.trim(this.value); 
     }).length === 0; 
    } 

    inputs.on('blur', function() { 
     submit.prop("disabled", !checkEmpty()); 
    }).blur(); // trigger an initial blur 


});