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

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

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

所以在这里，当选择选项1时，我希望按钮被禁用，当选择其他选项时，按钮被启用。但是，所有选项的“此处”按钮均已禁用。

请尝试此操作

$（'add#u to_collection'）。on（'change'，function（）{
var$option=$（'option:selected'，this）；
var$button=$（“#将对象添加到集合”）；
if（$option.hasClass（'highlight'））{
$button.prop（'disabled'，true）.val（'Added'）；
}否则{
$button.prop（'disabled'，false）.val（'Add'）；
}
}).change（）

1.
1.
3.
您的代码几乎正常工作。本例中的问题是，您没有检查所选的选项
元素是否具有
高亮显示的类。您可以使用来选择所选的
选项
元素。此外，还需要将该逻辑包装在
change
事件回调中

您可以将代码简化为以下内容：

这实质上监听
更改
事件，并确定所选
选项
元素是否具有类
突出显示
。布尔值用于禁用/启用相应的按钮

我还链接了一个
.change（）
事件，以便最初触发该事件



$（'add#u to_collection'）。on（'change'，function（）{
var hasClass=$（this）.find（':selected'）.hasClass（'highlight'）；
$（“#将对象添加到集合”）.prop（'disabled'，hasClass）.val（hasClass？'Added'：'add'）；
}).change（）

1.
1.
3.

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

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