Question

我有3个像这样的输入字段

<input type="text" id="from-price" name="from-price"/>
<input type="text" id="to-price" name="to-price"/>
<input type="text" id="price" name="price"/>

我希望当在所有字段中输入的值时，它会显示一个按钮所以为此我有我的代码

var val1 = jQuery('#from-price').val().length;
        var val2 = jQuery('#to-price').val().length;
        var val3 = jQuery('#price').val().length;
if (val1 && val2 && val3  < 1 ) {
                jQuery('#add-fields').attr("disabled", false);
            }

但这不起作用。

更新每次我得到长度0为什么？即使在输入文字后？

Answer 1

var elems = $('#from-price, #to-price, #price');

elems.on('keyup', function() {
    var hasValue = elems.filter(function() {
        return this.value.length
    }).length != elems.length;

    $('#add-fields').prop("disabled", hasValue);
});

FIDDLE

Answer 2

var $i = $('input.prices').on('change', function(){
    var b = $i.filter(function() {
       return $.trim(this.value).length > 0; 
   }).length !== $i.length;

   $('#add-fields').prop("disabled", b);
});

Answer 3

使用以下内容替换您的if条件：

if (val1 > 0 && val2 > 0 && val3 > 0 ) {
    jQuery('#add-fields').attr("disabled", false);
}

JSFIDDLE DEMO

Answer 4

使用.prop（）设置禁用状态

jQuery(function ($) {
    var $from = $('#from-price'),
        $to = $('#to-price'),
        $price = $('#price'),
        $add = $('#add-fields');

    $from.add($to).add($price).change(function () {
        $add.prop('disabled', !($.trim($from.val()).length && $.trim($to.val()).length && $.trim($price.val()).length))
    });
})

演示：Fiddle

Answer 5

好像你只在页面加载时检查值。这就是为什么它总是显示为0，除非你以某种方式预填充形式。

要使检查动态化，请将代码放入函数中并将其包装在change函数中：

$('input').change(my_function);

当然，最好为这三个输入添加一个类，然后使用类选择器（如果页面上有更多输入）：$('input.my_class')...

另外，你的if子句可以是这样的：

if (val1 > 0 && val2 > 0 && val3 > 0) {
    jQuery('#add-fields').attr("disabled", false);
}
else {
    jQuery('#add-fields').attr("disabled", true);
}

Answer 6

    var val1 = jQuery('#from-price').val().length;
    var val2 = jQuery('#to-price').val().length;
    var val3 = jQuery('#price').val().length;

    if (val1 > 0 && val2 > 0 && val3  > 0 ) {
            jQuery('#add-fields').attr("disabled", "false");
    }

这应该有用。

Answer 7

我假设您要在所有字段都填写后启用该按钮，如果是，那么您的if条件不正确。它应该大于0，表示该字段不为空。请尝试：

if (val1 > 0 && val2 > 0 && val3 > 0 ) {
     jQuery('#add-fields').attr("disabled", false);
     }

更新答案：如果您想立即查看，则需要附加事件处理程序。请尝试：

$("input").on("keyup",function(){
    var val1 = jQuery('#from-price').val().length;
    var val2 = jQuery('#to-price').val().length;
    var val3 = jQuery('#price').val().length;
if (val1 >0 && val2 > 0 && val3  > 0 ) {
            jQuery('#add-fields').attr("disabled", false);
}
});

Demo

Answer 8

作为这个小提琴的一部分，我已经解决了这个问题。如果这对您有用，请告诉我。

http://jsfiddle.net/3STqm/

作为小提琴的一部分，HTML代码如下所示：

<input type="text" id="from-price" name="from-price"/>
<input type="text" id="to-price" name="to-price"/>
<input type="text" id="price" name="price"/>
<button id="theButton">Submit</button>

jQuery代码如下：

var items = $("#from-price,#to-price,#price");

var button = $("#theButton").hide();

items.change(function(){
    var availableDataSize http://jsfiddle.net/3STqm/= items.map(function(){
        return $.trim($(this).val()) != "" ? true : null;
    }).length;                    
    availableDataSize == items.length ? button.show() : button.hide();
});

它只是试图找到可用的数据量，如果它等于字段数，则显示按钮，否则隐藏它。

Answer 9

$(document).on('change','#from-price, #to-price, #price',function(){
    var val1 = jQuery('#from-price').val();
    var val2 = jQuery('#to-price').val();
    var val3 = jQuery('#price').val();
       if (val1!="" && val2!="" && val3!="" ) {
            jQuery('#add-fields').attr("disabled", false);
        }else{
            jQuery('#add-fields').attr("disabled", true); 
         }

});

jQuery在if语句中使用多个条件

9 个答案: