Отключить кнопку отправки, если ни один из параметров выбора не выбран

Question

Я хотел бы отключить кнопку «Отправить» в форме поиска, которая содержит только выпадающие списки выбора. Здесь есть несколько подобных вопросов, но большинство из них касается полей. Самое близкое к моему делу - Disable submit button if all three of three specific dropdown fields are empty. Я изменил решение, поставляемое в JSFiddle, чтобы использовать пустую опцию, и действительно ли это работает, но только в JSFiddle, а не на моей странице.

Я использую тот же код из предложенного ответа (только измененные идентификаторы):

$('#submit').attr('disabled','disabled'); 

$('select').change(function(){ 
    if ($(this).hasClass('require_one')){ 
     $('#submit').removeAttr('disabled'); 
    } 
}); 

$('#submit').click(function() { 
    $('#searchform').submit(); 
}); 

Я добавить код выше сразу после I включают jquery.js (v 1.9.1.). сгенерировать форму динамически, но в JSFiddle я использую именно то, что видно в исходный код страницы: http://jsfiddle.net/cheeseus/d5xz6aw8/8/

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

И, если возможно, я бы также хотел, чтобы кнопка «Отправить» снова была отключена, если все три выбора снова установлены на пустые значения.

Answer 1

Я обычно не люблю использовать идентификатор (3) для выбора CSS, так как вы можете иметь только один селектор идентификатора с этим именем на документе и в нем может быть другой элемент уже с тем же ID. Как насчет того, чтобы использовать иерархию классов, чтобы точно определить элемент кнопки? В любом случае вам необходимо повторно проверить счета каждый раз, что вы выбираете на то, что пусто:

var $submitButton=$('.selector .btn'); 
var $selectors=$('.selector select.require_one'); 
$submitButton.attr('disabled','disabled'); 

$('.selector select.require_one').change(function(){ 
    var $empty=$selectors.filter(function() { return this.value == ""; }); 
    if ($selectors.filter(function() { return this.value == ""; }).length == $selectors.length){ 
      $submitButton.attr('disabled','disabled');   
    } else 
    { 
     $submitButton.removeAttr('disabled'); 
    } 
}); 



$submitButton.click(function() { 
    $('#searchform').submit(); 
}); 

JSFiddle code here

Answer 2

Вы можете просто использовать простой подсчет, чтобы увидеть, следует ли отображать кнопку или нет. Вот код jQuery.

var count = 0; 
$('.require_one').change(function() { 
    count++; 
    if (count >= 3) { 
     $('#submit').removeAttr('disabled'); 
    } 
}); 

$('#submit').attr('disabled','disabled'); 

Answer 3

Я думаю, это потому, что вы не проверить ваш документ готов. я добавил несколько улучшений:

• кэширования объектов JQuery в переменных делает ваш код немного быстрее (вы не смотрите на него каждый раз выбрать, неоспоримые изменения).

• используется рекомендуемый способ связывания событий - «на» функции

• «инвалиды» ​​является свойство не является атрибутом, JQuery посвятил метод использовать

• на выберите изменение - проверить все выбирает, если любое не выбрано, оно есть - set prop отключен для true, в противном случае установите false.

• вместо отключения отправки при инициализации запускает то же самое действие, которое вы делаете, когда выбрано, изменилось (если вы начинаете с параметра, выбранного во всех выбранных начальных состояниях, не будут отключены).

$(document).ready(function() { 
    var $submit = $('#submit'); 
    var $selects = $('select.require_one'); 

    $submit.on("click", function() { 
     $('#searchform').submit(); 
    }); 

    $selects 
     .on("change", function(){ 
      var $not_selected = $selects.filter(function() { 
       return !$(this).val(); 
      }); 
      $submit.prop('disabled', $not_selected.length ? true : false); 
     }) 
     .first() 
     .triggerHandler('change');  
});