<div class="snippet-code"> $('#new_day').on('input', function() { $(".days >"> <div class="snippet-code"> $('#new_day').on('input', function() { $(".days >"> <div class="snippet-code"> $('#new_day').on('input', function() { $(".days >" />

入力時JQuery/Javascript

私は、翌日のinout要素に対してリアルタイムの入力検証を試みます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#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>


You have another proposition? Add it to the list.

<input id="new_day" type="text" /> <input id="new_day_save" type="button" value="save new day" />
</div> </div>

なぜうまくいかないのかわかりません。

0
id = "day" を持つ要素はありません!!
追加された 著者 Hamza Abdaoui,
達成しようとしていることをよりよく説明してください
追加された 著者 Bogdan,

4 答え

option テキストの配列を取得して、その配列に入力値が含まれているかどうかを確認できます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#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>

You have another proposition? Add it to the list.

<input id="new_day" type="text" /> <input id="new_day_save" type="button" value="save new day" />
</div> </div>

2
追加された

次のような状況では、現在のオプションテキスト $(this).text()を使用する必要があります。

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

NOTE : Remove the disabled outside of the each method.

お役に立てれば。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#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>


You have another proposition? Add it to the list.

<input id="new_day" type="text" /> <input id="new_day_save" type="button" value="save new day"/>
</div> </div>

1
追加された

あなたのコードによれば、あなたは $( '#new_day')。val() $( "option")を比較しています。 $( "option")を使用して値を設定します。

$( "option")の代わりに $(this).text()または $(this).val()を使用できますそしてそれはうまくいくでしょう。

正しいコードは以下のようになります

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#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);
      }
   });
});
</div> </div>

1
追加された

あなたのスクリプトは次のようになります。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

You have another proposition? Add it to the list.

<input id="new_day" type="text" /> <input id="new_day_save" type="button" value="save new day"/>
</div> </div>

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript