在輸入的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")它永遠不會匹配，因爲您無法使用獲取文本/值。

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