如果禁用按钮更改文本（引导程序）

Question

使用表单。目前，在我的<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？

Answer 1

我建议：

// 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();

JS Fiddle demo

参考文献：

• change()。
• find()。
• text()。
• prop()。

Answer 2

使用： $（＆＃39;＃cart-btn＆＃39;）。text（＆＃34;添加到购物车＆＃34;）;

Answer 3

您可以使用您的html并修改您的JS代码：

$('#choose-size').one('change', function() {
 $('#cart-btn').prop('disabled', false).text('ADD TO CART');});

http://jsfiddle.net/L9sTQ/。这里有完整的代码。

Answer 4

试试这个。的 Demo Fiddle

$(document).ready(function(){

    if($('#cart-btn').prop('disabled')){     //if disabled
        $('#cart-btn').html('SELECT SIZE');  //or .text()
    }

    $('#choose-size').one('change', function() {
     $('#cart-btn').prop('disabled', false).html('ADD TO CART');     //or .text()
    });

});

或者

$(document).ready(function(){

    if($("#choose-size option:selected" ).text() == 'Select Sizes'){
    //if the selected option is default option
        $('#cart-btn').html('SELECT SIZE');
    }

    $('#choose-size').one('change', function() {
     $('#cart-btn').prop('disabled', false).html('ADD TO CART');     //or .text()
    });

});