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

Question

У меня есть простая форма с четырьмя полями выбора.Если ДА выбрано в любом поле формы, кнопка отправки должна быть отключена, и должен появиться скрытый div.Вот пример моей разметки:

<form>
I have read the information on the product(s)<select name="field4"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

Do you have any allergies to any ingredients in product(s)?
 <select name="field5"><option value="Yes">Yes</option> <option value="No">No</option> </select>

Are you pregnant?
 <select name="field6"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

Have you ever used this type of product and had undesirable results?
 <select name="field7"> <option value="Yes">Yes</option> <option value="No">No</option> </select>

<input name="cmdSubmit" type="submit" value="Submit" />
</form>


<div style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>

Спасибо за вашу помощь в этом.Я новичок JQuery, стараюсь изо всех сил, чтобы учиться.

Answer 1

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

1. функция записи для проверки всех параметров, изменения отключить / включить отправку, показать / скрыть div
2. вызов функции под нагрузкой
3. вызывать функцию для проверки всех опций каждый раз, когда изменяется значение опции

.

checkOptions();
$("select").change(checkOptions);

function checkOptions() {
  var yesFound = false;
  $("select").each(function(index, element) {
    if ( $(element).val() == "Yes" ) {
      yesFound = true;
    }
  });

  if (yesFound) {
    $("#hidden-div").show();
    $("input[type=Submit]").attr("disabled","disabled");
  } else {
    $("#hidden-div").hide();
    $("input[type=Submit]").removeAttr("disabled");
  };
}

со слегка измененным HTML:

<form>
  <select name="field4"> 
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> I have read the information on the product(s)<br/>
  <select name="field5">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Do you have any allergies to any ingredients in product(s)?<br/>
  <select name="field6">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Are you pregnant?<br/>
  <select name="field7">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select> Have you ever used this type of product and had undesirable results?<br/>
  <br/>
  <input name="cmdSubmit" type="submit" value="Submit" />
</form>
<div id="hidden-div" style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>

Пример веб-страницы:

http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-disable-submit-dynamically.html

На нагрузке:

все опции «Нет», кроме одного:

все опции «Да»:

Answer 2

Дайте всем вашим выборам (выпадающим спискам) класс "foo". Дайте варианты "Да", класс "Да". $("select.foo option.yes:selected").empty() означает «Ни один из раскрывающихся вариантов, помеченных как« да », не выбран»

So

$("select.foo").change(function() {
   if(!$("select.foo option.yes:selected").empty()) {
      /* Do something here, maybe use BlockUI JS library */
   }
});

Answer 3

Вы можете установить атрибут класса на обоих ваших выборках что-то вроде «выбора», например:

<select name="field5" class="choices"...

<select name="field6" class="choices"...

и сделайте что-то вроде этого:

$(function() {
  $(".choices").change(function() {
    var anyYeses = false;
    $(".choices").each(function() {
      if($(this).val() == "Yes") {
        anyYeses = true;
      }
    });
    if(anyYeses) {
      $("input[name=cmdSubmit]").attr('disabled', 'disabled'); //disables
    }
    else {
      $("input[name=cmdSubmit]").removeAttr('disabled'); //enables
    }
  });
});

Answer 4

var selects = $('select').change(function(){ //on change of any select
    var hasYes = false;
    selects.each(function(){ // check all selects
        if($(this).val() == 'Yes') //for 'Yes'
            hasYes = true;
    });
    if(hasYes){ // show div disable submit
       $('input:submit').attr('disabled','disabled');
       $('div.hidden').show();
    }
    else{
        $('input:submit').removeAttr('disabled');
       $('div.hidden').hide(); // add class hidden to the div
    }
});