[英]JQuery: disable button if select option has certain class
I have dropdown list with collection options. 我有带有收集选项的下拉列表。 When option with certain class is selected I want submit button to be disabled. 当选择特定类别的选项时,我希望禁用提交按钮。 This is what I've tried to do: 这是我尝试做的:
<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');
}
So here, when option 1 is selected I want button to be disabled and when other options are selected button be enabled. 所以在这里,当选择选项1时,我希望禁用按钮,而当选择其他选项时,则启用按钮。 However here button is disabled for all options. 但是,此处所有选项的按钮均被禁用。
Try this 尝试这个
$('#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>
Your code is almost working. 您的代码几乎可以正常工作了。 The problem in your case is that you aren't checking to see if the selected option
element has a class of highlight
. 你的情况的问题是,你不检查,以查看是否选定 option
元素有一个类的highlight
。 You could use the :selected
selector in order to select the selected option
element. 您可以使用:selected
选择器来选择所选的option
元素。 In addition, you would also need to wrap that logic within a change
event callback. 另外,您还需要将该逻辑包装在change
事件回调中。
You could simplify the code to the following: 您可以将代码简化为以下内容:
This essentially listens to the change
event, and determines whether the selected option
element has the class highlight
. 这实际上侦听change
事件,并确定所选的option
元素是否具有class highlight
。 The boolean is used to disabled/enable the corresponding button. 布尔值用于禁用/启用相应的按钮。
I also chained a .change()
event so that the event would be fired initially. 我还链接了一个.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.