在输入 JQuery/Javascript [关闭]

Posted 2023-05-09

【中文标题】在输入 JQuery/Javascript [关闭]

【英文标题】：On input JQuery/Javascript [closed]

【发布时间】：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"的元素！！

请更好地解释您要达到的目标

【参考方案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"/>