输入 JQuery/Javascript

Question

我正在尝试对第二天的 inout 元素进行实时输入验证：

$('#new_day').on('input', function() {
  $(".days > option").each(function() {
    if ($('#new_day').val() == $("option")) {
      $('#new_day_save').prop('disabled', true);
    } else {
      $('#new_day_save').prop('disabled', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="days">
   <option>Monday</option>
   <option>Friday</option>
</select>
<p>You have another proposition? Add it to the list.</p>
<input id="new_day" type="text" />
<input id="new_day_save" type="button" value="save new day" />

我不知道为什么它不起作用。

Answer 1

您必须在以下条件下使用当前选项文本 $(this).text()：

$(".days > option").each(function() {
    if( input_value == $(this).text()){
        $('#new_day_save').attr('disabled', 'disabled');
    }
});

注意： 删除每个方法之外的禁用。

希望对您有所帮助。

$('#new_day').on('input', function(){
   //Get input value
   var input_value = $(this).val(); 
   
   //Remove disabled from the button
   $('#new_day_save').removeAttr('disabled'); 
   
   //iterate through the options 
   $(".days > option").each(function() {
      //If the input value match option text the disable button
      if( input_value == $(this).text()){
          $('#new_day_save').attr('disabled', 'disabled');
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="days">
   <option>Monday</option>
   <option>Friday</option>
</select>
<p>You have another proposition? Add it to the list.</p>
<input id="new_day" type="text" />
<input id="new_day_save" type="button" value="save new day"/>

Answer 2

您可以获得 option 个文本数组并检查该数组是否包含输入值。

$('#new_day').on('input', function() {
  var opts = $('select option').map(function() {
    return $(this).text()
  }).get();

  $('#new_day_save').prop('disabled', opts.includes($(this).val()))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="days">
  <option>Monday</option>
  <option>Friday</option>
</select>
<p>You have another proposition? Add it to the list.</p>
<input id="new_day" type="text" />
<input id="new_day_save" type="button" value="save new day" />

Answer 3

您的脚本应如下所示：

// start with a disabled button
$('#new_day_save').prop('disabled', true);

$('#new_day').on('input', function(){
     var dayExists = false;
     // use console log or echo to debug your script
     // console.log($('#new_day').val());
     $(".days > option").each(function() {
        if($('#new_day').val() == $(this).val()){
            dayExists = true;
        }
     });
     //console.log(dayExists);
     $('#new_day_save').prop('disabled', !dayExists);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="days">
   <option>Monday</option>
   <option>Friday</option>
</select>
<p>You have another proposition? Add it to the list.</p>
<input id="new_day" type="text" />
<input id="new_day_save" type="button" value="save new day"/>

Answer 4

根据您的代码，您正在将 $('#new_day').val() 与 $("option") 进行比较，后者永远不会匹配，因为您无法使用 $("option") 获得 text/value。

您可以使用 $(this).text() 或 $(this).val() 代替 $("option")，它会起作用。

您的正确代码如下

$('#new_day').on('input', function(){
   $(".days > option").each(function() {
      if($('#new_day').val() == $(this).text()){
        $('#new_day_save').prop('disabled', true);
      }else{
        $('#new_day_save').prop('disabled', false);
      }
   });
});

输入 JQuery/Javascript

On input JQuery/Javascript

javascript

validation

jquery

input

jquery-selectors