Am Eingang JQuery/Javascript

Question

Ich versuche, eine Echtzeit-Überprüfung von Eingaben auf den folgenden Tag inout Element zu machen:

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

Ich weiß nicht, warum es nicht funktioniert.

Answer 1

Sie haben die aktuelle Option Text $(this).text() in der Bedingung verwenden wie:

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

HINWEIS: Behinderte außerhalb der jeweiligen Methode entfernen.

Hoffe, das hilft.

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

Sie Array von option Texte erhalten und prüfen Sie, ob das Array Eingangswert enthält.

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

Ihr Skript sollte wie folgt aussehen:

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

Wie pro Ihren Code, die Sie vergleichen $('#new_day').val() mit $("option"), die da nie übereinstimmen Sie können keinen Text/Wert mitabrufen.

Sie können $(this).text() OR $(this).val() anstelle von $("option") verwenden und es wird funktionieren.

Sie wird korrekter Code als sein unter

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