JQuery использовать несколько условий в условии if

Question

JQuery использовать несколько условий в условии if

0

У меня есть 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"/>

и я хочу, чтобы, когда значения, введенные во всех полях, отобразится кнопка So, для этого у меня есть мой код, подобный этому

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, почему? Даже после ввода текста?

NewUser 30 нояб. 2013, в 13:38

Источник

1

Возможно, вы захотите прослушать событие и запускать этот код каждый раз, когда это событие происходит.
Benjamin Gruenbaum 30 нояб. 2013, в 11:42
0

Используйте console.log(jQuery('#from-price').val().length) в firefox / chrome, чтобы увидеть, какие значения они выводят
Catalin 30 нояб. 2013, в 11:44

Теги:

jquery

9 ответов

Ещё вопросы

Возможно, вы захотите прослушать событие и запускать этот код каждый раз, когда это событие происходит.
Используйте console.log(jQuery('#from-price').val().length) в firefox / chrome, чтобы увидеть, какие значения они выводят

adeneo · Answer 1 · 2013-11-30T09-16-00.000Z

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

undefined · Answer 2 · 2013-11-30T09-44-00.000Z

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);
});

+1 - похоже у нас была несколько похожая идея
@adeneo Да, кажется, что так :), спасибо.

Arun P Johny · Answer 3 · 2013-11-30T10-10-00.000Z

Используйте.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))
    });
})

Демо: скрипка

Если бы вы могли только минимизировать код - это сделало бы жизнь начинающего разработчика намного проще ...
Вы знаете: jQuery(function(e){var t=e("#from-price"),n=e("#to-price"),r=e("#price"),i=e("#add-fields");t.add(n).add(r).change(function(){i.prop("disabled",!(e.trim(t.val()).length&&e.trim(n.val()).length&&e.trim(r.val()).length))})})

Dhaval Bharadva · Answer 4 · 2013-11-30T10-00-00.000Z

1

Замените условие if следующим:

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

JSFIDDLE DEMO

Dhaval Bharadva 30 нояб. 2013, в 10:00

2

Я подозреваю, что он хочет проверить, является ли val > 0 или аналогичным, поскольку он хочет включить, только если все поля заполнены.
Joachim Isaksson 30 нояб. 2013, в 11:48
0

@JoachimIsaksson OP, если условие содержит синтаксическую ошибку, является основной проблемой.
Dhaval Bharadva 30 нояб. 2013, в 11:51
0

@JoachimIsaksson: «@Dh ..» кажется правильным в своей интерпретации
Abhitalks 30 нояб. 2013, в 11:52
0

@abhitalks "Я хочу, чтобы при вводе значений во все поля была кнопка"
Joachim Isaksson 30 нояб. 2013, в 11:55
0

@Dh ... каждый раз, когда я получаю длину 0 почему?
NewUser 30 нояб. 2013, в 11:55
0

@JoachimIsaksson: Да. Ты прав. Виноват!
Abhitalks 30 нояб. 2013, в 11:56
0

@JoachimIsaksson У меня есть обновление, вы также можете проверить мою демоверсию jsfiddle.
Dhaval Bharadva 30 нояб. 2013, в 12:04
0

@NewUser, пожалуйста, ознакомьтесь с демонстрацией jsfiddle. Вы можете получить решение.
Dhaval Bharadva 30 нояб. 2013, в 12:05

Показать ещё 6 комментариев

techMonster · Answer 5 · 2013-11-30T10-08-00.000Z

Я поставил исправление для этой проблемы как часть этой скрипки. Скажите мне, если это сработает для вас.

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();
});

Он просто пытается найти доступный объем данных и, если он равен количеству полей, затем покажите, что кнопка скрывает его.

Stefan Moraru · Answer 6 · 2013-11-30T10-04-00.000Z

    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");
    }

Это должно сработать.

Shomz · Answer 7 · 2013-11-30T09-34-00.000Z

Похоже, вы проверяете значения только при загрузке страницы. Вот почему он всегда показывает 0, если вы заранее не заполните форму.

Чтобы сделать проверку динамической, введите код в функцию и оберните его внутри функции изменения:

$('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);
}

Op спрашивает о множественных условиях в условии if. Событие и обработчик он, наверное, уже выяснил.
@abhitalks Я не уверен в этом: «Я хочу, чтобы при вводе значений во все поля была кнопка»
Вот где он объясняет свой вариант использования. Пожалуйста, посмотрите название вопроса для проблемы, с которой он сталкивается.
@abhitalks Хорошо, я обновил свой ответ.

Joke_Sense10 · Answer 8 · 2013-11-30T09-21-00.000Z

Я предполагаю, что вы хотите включить кнопку, если все поля заполнены, если это так, то ваше условие 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);
}
});

демонстрация

Если я также ввожу какой-то текст снова, он показывает 0?
@NewUser Потому что вам нужен слушатель, чтобы проверять значения при каждом изменении, а не только при загрузке страницы.
@NewUser Проверьте мой обновленный ответ ..
@ Joke_Sense10 это нормально, когда я ввожу значения в первый раз, но когда я удаляю значения с помощью backspace, тогда он должен снова отключить кнопку, но в вашей скрипке, когда я удаляю значения, она все еще показывает, что кнопка активна?

Bhadra · Answer 9 · 2013-11-30T09-06-00.000Z

$(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); 
         }

});