按鈕仍然禁用如果選擇仍然存在，但輸入框爲空

所以我試圖完成，仍保持「搜索」啓動按鈕，即使沒有文字在我的輸入框中。因此，我猜測關鍵時，代碼應該檢查任何和所有選定的當前值的選擇框，如果沒有，則禁用繼續禁用搜索按鈕。

但問題是，我不夠聰明，無法正確編碼。

這裏是一個事先知情同意：

下面是HTML標記：

window.onload = function() { 
 
    $(document).on('change', 'select', function() { 
 

 
    if (this.value.length > 0) { 
 
     $('#search').prop('disabled', false) 
 
    } else { 
 
     $('#search').prop('disabled', true) 
 
    } 
 

 
    }); 
 

 
    $(document).on('change keyup', 'input', function() { 
 

 
    if (this.value.length > 0) { 
 
     $('#search').prop('disabled', false) 
 
    } else { 
 
     $('#search').prop('disabled', true) 
 
    } 
 
    }); 
 

 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    Cars 
 
    <select id="car"> 
 
    <option value=""></option> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    <br> 
 
    <br>Fruits 
 
    <select id="fruits"> 
 
    <option value=""></option> 
 
    <option value="apple">apple</option> 
 
    <option value="banana">banana</option> 
 
    <option value="pear">pear</option> 
 
    <option value="strawberry">strawberry</option> 
 
    <option value="mango">mango</option> 
 
    <option value="orange">orange</option> 
 
    </select> 
 
    <br> 
 
    <br>Vegetable 
 
    <input type="input" id="veggie"> 
 
    <br> 
 
    <br>Number 
 
    <input type="input" id="number"> 
 
    <br> 
 
    <br> 
 
    <input type="button" value="search" id="search" disabled> 
 

 
</body> 
 

 
</html>

來源

2016-07-27 BobbyJones

所以，你想它最初禁用，但是當用戶輸入了一些，使用時要啓用了嗎？ – user8333141

試試這個：https：//jsfiddle.net/bb70t83u/。你可以刪除你創建的兩個函數，並使用第三個例子，它可以工作。這是否解決了您遇到的問題？ – Si8

嘗試將代碼置於'$（document）.ready（）'函數中，並在結束標記''之前。 – user3284463

試試這個：https://jsfiddle.net/bb70t83u/

我同時取出你的函數，並把在文件就緒功能裏面。我只爲select做過。您可以對input執行相同操作。讓我知道你是否需要幫助。

這是基於我認爲你說的。請澄清，如果這不是你在找什麼。

JQuery的：

$(function() { 
    $("select").on("change", function() { 
    if (this.value.length > 0) { 
     $('#search').prop('disabled', false) 
    } 
    else { 
     $('#search').prop('disabled', true) 
    } 
    }); 
})

來源

2016-07-27 17:50:30 Si8

您的代碼與我的示例頂部的代碼產生的結果相同。如果在下拉菜單中進行了選擇以及輸入框中的一些文本，如果選擇被刪除並且文本保留在任何輸入框中，則搜索按鈕保持禁用狀態，搜索按鈕將保持禁用狀態。 – BobbyJones

因此，如果選擇是空的，但文本框中有文本，請保持按鈕啓用？ – Si8

類似這樣的：https://jsfiddle.net/bb70t83u/1/ – Si8

驗證對用戶進行任何操作整個表格，

window.onload = function() { 
 
    var validateForm = function() { 
 
    return $(':input').filter(function() { 
 
     return this.value === ''; 
 
    }).length; 
 
    } 
 
    $(document).on('change keyup', ':input', function() { 
 
    $('#search').prop('disabled', validateForm()); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Cars 
 
<select id="car"> 
 
    <option value=""></option> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<br> 
 
<br>Fruits 
 
<select id="fruits"> 
 
    <option value=""></option> 
 
    <option value="apple">apple</option> 
 
    <option value="banana">banana</option> 
 
    <option value="pear">pear</option> 
 
    <option value="strawberry">strawberry</option> 
 
    <option value="mango">mango</option> 
 
    <option value="orange">orange</option> 
 
</select> 
 
<br> 
 
<br>Vegetable 
 
<input type="input" id="veggie"> 
 
<br> 
 
<br>Number 
 
<input type="input" id="number"> 
 
<br> 
 
<br> 
 
<input type="button" value="search" id="search" disabled>

來源

2016-07-27 17:55:17 Rayon

您的代碼只是一直禁用搜索按鈕。 – BobbyJones

@BobbyJones如果所有的輸入都被填滿，那麼只有按鈕會被啓用。 – Rayon

嘗試在$(document).ready()功能包裝你的代碼。

<script> 

$(document).ready(function(){ 
    $(document).on('change', 'select', function() { 

     if (this.value.length > 0 || $('input').value.lenght > 0) { 
     $('#search').prop('disabled', false) 
     } else { 
     $('#search').prop('disabled', true) 
     } 

    }); 

    $(document).on('change keyup', 'input', function() { 

    if (this.value.length > 0 || $('select').value.lenght > 0) { 
     $('#search').prop('disabled', false) 
    } else { 
     $('#search').prop('disabled', true) 
    } 
    }); 
}) 
</script> 
<!--- Just before body tag ---> 
</body>

DEMO

來源

2016-07-27 18:40:08 user3284463

不起作用。它在我的文章中產生與我的結果相同的結果。 – BobbyJones

@BobbyJones在控制檯中是否有錯誤？ – user3284463

按鈕仍然禁用如果選擇仍然存在，但輸入框爲空

回答

相關問題