jQuery：如果选择选项具有特定类，则禁用按钮

Question

我有带有收集选项的下拉列表。 当选择特定类别的选项时，我希望禁用提交按钮。 这是我尝试做的：

<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时，我希望禁用按钮，而当选择其他选项时，则启用按钮。 但是，此处所有选项的按钮均被禁用。

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

Answer 2

您的代码几乎可以正常工作了。 你的情况的问题是，你不检查，以查看是否选定 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>