使用表格。目前,该按钮处于禁用状态,直到在<select>
此示例中选择了一个选项为止:
HTML:
<select id="choose-size" class="form-control input-sm">
<option selected disabled>Select Sizes</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X Large</option>
</select>
<button id="cart-btn" type="button" class="btn btn-success btn-lg cart-btn" disabled>
ADD TO CART
</button>
jQuery:
$('#choose-size').one('change', function() {
$('#cart-btn').prop('disabled', false);
});
我将如何更改文本ADD TO CART
,以SELECT SIZE
当按钮处于禁用状态。选择大小后,文本将变为ADD TO CART
?
我建议:
// binds an event handler to the 'change' event of the '#choose-size' element:
$('#choose-size').change(function(){
// finds the ':selected' option:
var opt = $(this).find('option:selected');
// selects the '#cart-btn' element:
$('#cart-btn')
// sets the 'disabled' property of the element to true
// (if the option is disabled) or false (if the option is *not* disabled):
.prop('disabled', opt.prop('disabled'))
// sets the text of the button according to the option being disabled or not:
.text(function(){
return opt.prop('disabled') ? 'Select size' : 'Add to cart';
});
// triggers the 'change' event, to run the event-handler on page-load:
}).change();
参考:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句