jquery plus/minus 选择器

Question

我的页面上有一个 plus/minus jquery 选择器。当页面加载或数字达到 1 时，我希望减号按钮变灰以模拟非活动状态。这是我的代码和 fiddle https://jsfiddle.net/pgxvhs83/2/

<span class="form-title">Quantity:</span>
<form id='myform' method='POST' action='#' class="numbo">
<input type='button' value='–' class='qtyminus' field='quantity' style="font-weight: bold;" />
<input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important"/>
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
</form>

jQuery(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        $('input[name='+fieldName+']').val(currentVal + 1);
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(1);
    }
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 1) {
        // Decrement one
        $('input[name='+fieldName+']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(1);
    }
});
});

Answer 1

试试这个

https://jsfiddle.net/pgxvhs83/3/

我在加载时添加了它。你在 minus 和 plus 事件中有类似的代码行。

var qty = $(".qty").val();

  if(qty < 2){
  $(".qtyminus").addClass("qtyminusGrey");
}

当 qty 输入的值为 1 时，qtyminusGrey class 被添加到减号按钮。从那里你可以随心所欲地设计它。

希望这会有所帮助

Answer 2

像这样的东西应该有用。在下面的代码中，它将按钮中的 - 更改为 X，并在其周围放置了一个红色边框。您需要尝试使用样式，使其看起来像您想要的那样。

    jQuery(document).ready(function(){
        // This button will increment the value
        $('.qtyplus').click(function(e){
            // Stop acting like a button
            e.preventDefault();
            // Get the field name
            fieldName = $(this).attr('field');
            // Get its current value
            var currentVal = parseInt($('input[name='+fieldName+']').val());
            // If is not undefined
            if (!isNaN(currentVal)) {
                // Increment
                $('input[name='+fieldName+']').val(currentVal + 1);
                $('.qtyminus').val("-").removeAttr('style')
            } else {
                // Otherwise put a 0 there
                $('input[name='+fieldName+']').val(1);

            }
        });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 1) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
            $('.qtyminus').val("X").css('border','1px solid red');       
        }
    });
});
</pre>

jquery plus/minus 选择器

jquery plus/minus selector

html

css

jquery

toggle