在输入 JQuery/Javascript [关闭]答案

【问题标题】：On input JQuery/Javascript [closed]在输入 JQuery/Javascript [关闭]
【发布时间】：2018-01-15 19:09:48
【问题描述】：

我正在尝试对第二天的 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" />

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

【问题讨论】：

没有id="day"的元素！！
请更好地解释您要达到的目标

标签： javascript jquery validation input jquery-selectors

【解决方案1】：

您可以获取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" />

【讨论】：

【解决方案2】：

您必须在以下条件中使用当前选项文本$(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"/>

【讨论】：

【解决方案3】：

根据您的代码，您将$('#new_day').val() 与$("option") 进行比较，这将永远不会匹配，因为您无法使用$("option") 获取文本/值。

您可以使用$(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);
      }
   });
});

【讨论】：

【解决方案4】：

您的脚本应如下所示：

// 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"/>

【讨论】：