si el botón está deshabilitado, cambie el texto (bootstrap)

Working with forms. Currently the button is disabled until an option is chosen in my <select> Aquí hay un ejemplo:

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

How would I change the text ADD TO CART a SELECT SIZE when the button is in disabled state. When the size is selected then the text change to ADD TO CART?

preguntado el 28 de mayo de 14 a las 12:05

4 Respuestas

Sugeriría:

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

Demostración de JS Fiddle.

Referencias:

contestado el 28 de mayo de 14 a las 12:05

use: $('#cart-btn').text("ADD TO CART");

contestado el 28 de mayo de 14 a las 12:05

you can use your html and modify your JS code to:

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

http://jsfiddle.net/L9sTQ/. Here you have the entire code.

contestado el 28 de mayo de 14 a las 12:05

small. I like this too! - Panoplia

Prueba con esto. violín de demostración

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

});

Or

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

});

contestado el 28 de mayo de 14 a las 12:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.