[英]JQuery: disable button if select option has certain class
我有帶有收集選項的下拉列表。 當選擇特定類別的選項時,我希望禁用提交按鈕。 這是我嘗試做的:
<form id="addToCollection">
<select id="add_to_collection">
<option value="1" class="highlight">1</option>
<option value="2">1</option>
<option value="3">3</option>
</select>
<input id="add-object-to-collection"
type="submit" value="Add" class="button"/>
</form>
<input id="add-object-to-collection" type="submit" value="Add" class="button"/>
if($('#add_to_collection option').hasClass('highlight')) {
$("#add-object-to-collection").prop('disabled', true);
$("#add-object-to-collection").attr('value', 'Added');
} else {
$("#add-object-to-collection").prop('disabled', false);
$("#add-object-to-collection").attr('value', 'Add');
}
所以在這里,當選擇選項1時,我希望禁用按鈕,而當選擇其他選項時,則啟用按鈕。 但是,此處所有選項的按鈕均被禁用。
嘗試這個
$('#add_to_collection').on('change', function () { var $option = $('option:selected', this); var $button = $('#add-object-to-collection'); if ($option.hasClass('highlight')) { $button.prop('disabled', true).val('Added'); } else { $button.prop('disabled', false).val('Add'); } }).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="addToCollection"> <select id="add_to_collection"> <option value="1" class="highlight">1</option> <option value="2">1</option> <option value="3">3</option> </select> <input id="add-object-to-collection" type="submit" value="Add" class="button" /> </form>
您的代碼幾乎可以正常工作了。 你的情況的問題是,你不檢查,以查看是否選定 option
元素有一個類的highlight
。 您可以使用:selected
選擇器來選擇所選的option
元素。 另外,您還需要將該邏輯包裝在change
事件回調中。
您可以將代碼簡化為以下內容:
這實際上偵聽change
事件,並確定所選的option
元素是否具有class highlight
。 布爾值用於禁用/啟用相應的按鈕。
我還鏈接了一個.change()
事件,以便該事件最初會被觸發。
$('#add_to_collection').on('change', function () {
var hasClass = $(this).find(':selected').hasClass('highlight');
$('#add-object-to-collection').prop('disabled', hasClass).val(hasClass ? 'Added' : 'Add');
}).change();
$('#add_to_collection').on('change', function () { var hasClass = $(this).find(':selected').hasClass('highlight'); $('#add-object-to-collection').prop('disabled', hasClass).val(hasClass ? 'Added' : 'Add'); }).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="addToCollection"> <select id="add_to_collection"> <option value="1" class="highlight">1</option> <option value="2">1</option> <option value="3">3</option> </select> <input id="add-object-to-collection" type="submit" value="Add" class="button" /> </form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.