Question

我的页面有多个添加（+/-）购物车按钮，如果一个按钮从三个中增加，则应禁用所有剩余按钮以增加和减少。

<div class="pull-right"><span class="desc_room_price">EUR 80.50</span>
    <span class="input-group __newbtn">
          <span class="input-group-btn">
              <button type="button" class="btn  btn-number __minusbtn"  data-type="minus" data-field="hr_sec_b[1]">
                <span class="minus_btn_a"></span>
              </button>
          </span>
          <input type="text" name="hr_sec_b[1]" class="form-control input-number" value="0" min="0" max="100">
          <span class="input-group-btn">
              <button type="button" class="btn btn-number __plusbtn" data-type="plus" data-field="hr_sec_b[1]">
                  <span class="plus_btn_a"></span>
              </button>
          </span>
      </span>
</div>

<div class="pull-right"><span class="desc_room_price">EUR 80.50</span>
    <span class="input-group __newbtn">
          <span class="input-group-btn">
              <button type="button" class="btn  btn-number __minusbtn"  data-type="minus" data-field="hr_sec_b[1]">
                <span class="minus_btn_a"></span>
              </button>
          </span>
          <input type="text" name="hr_sec_b[1]" class="form-control input-number" value="0" min="0" max="100">
          <span class="input-group-btn">
              <button type="button" class="btn btn-number __plusbtn" data-type="plus" data-field="hr_sec_b[1]">
                  <span class="plus_btn_a"></span>
              </button>
          </span>
      </span>
</div>

    $('.btn-number').click(function(e){
        e.preventDefault();

        var fieldName = $(this).attr('data-field');
        var type      = $(this).attr('data-type');
        var input = $("input[name='"+fieldName+"']");
        var currentVal = parseInt(input.val());
        if (!isNaN(currentVal)) {
            if(type == 'minus') {
                var minValue = parseInt(input.attr('min')); 
                if(!minValue) minValue = 0;
                if(currentVal > minValue) {
                    input.val(currentVal - 1).change();
                } 
                if(parseInt(input.val()) == minValue) {
                    $(this).attr('disabled', true);
                }

            } else if(type == 'plus') {
                var maxValue = parseInt(input.attr('max'));
                if(!maxValue) maxValue = 9999999999999;
                if(currentVal < maxValue) {
                    input.val(currentVal + 1).change();
                }
                if(parseInt(input.val()) == maxValue) {
                    $(this).attr('disabled', true);
                }

            }
        } else {
            input.val(0);
        }
    });

默认情况下，将启用所有按钮。有什么问题，请告诉我。

Answer 1

问题是：

两个输入名称相同：hr_sec_b[1]
所有按钮具有相同的data-field="hr_sec_b[1]"值
缺少按钮+和 - 标签。
当达到最小/最大值时，固定按钮禁用/启用。

<强> Working JSFiddle example

更正了HTML

<div class="pull-right"><span class="desc_room_price">EUR 80.50</span>
    <span class="input-group __newbtn">
          <span class="input-group-btn">
              <button type="button" class="btn  btn-number __minusbtn"  data-type="minus" data-field="hr_sec_b[0]">
                <span class="minus_btn_a">-</span>
              </button>
          </span>
          <input type="text" name="hr_sec_b[0]" class="form-control input-number" value="0" min="0" max="5">
          <span class="input-group-btn">
              <button type="button" class="btn btn-number __plusbtn" data-type="plus" data-field="hr_sec_b[0]">
                  <span class="plus_btn_a">+</span>
              </button>
          </span>
      </span>
</div>

<div class="pull-right"><span class="desc_room_price">EUR 80.50</span>
    <span class="input-group __newbtn">
          <span class="input-group-btn">
              <button type="button" class="btn  btn-number __minusbtn"  data-type="minus" data-field="hr_sec_b[1]">
                <span class="minus_btn_a">-</span>
              </button>
          </span>
          <input type="text" name="hr_sec_b[1]" class="form-control input-number" value="0" min="0" max="5">
          <span class="input-group-btn">
              <button type="button" class="btn btn-number __plusbtn" data-type="plus" data-field="hr_sec_b[1]">
                  <span class="plus_btn_a">+</span>
              </button>
          </span>
      </span>
</div>

更正了JavaScript

$('.btn-number').click(function(e){
    e.preventDefault();

    var fieldName = $(this).attr('data-field');
    var type      = $(this).attr('data-type');
    var input = $("input[name='"+fieldName+"']");
    var reverseInput = $("button[data-field='" + fieldName + "'][data-type!='" + type + "']");
    var currentVal = parseInt(input.val());

    if (!isNaN(currentVal)) {
        if(type == 'minus') {
            $(reverseInput).attr('disabled', false);
            var minValue = parseInt(input.attr('min')); 
            if(!minValue) minValue = 0;
            if(currentVal > minValue) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == minValue) {
                $(this).attr('disabled', true);
            }
        } else if(type == 'plus') {
            $(reverseInput).attr('disabled', false);
            var maxValue = parseInt(input.attr('max'));
            if(!maxValue) maxValue = 9999999999999;
            if(currentVal < maxValue) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == maxValue) {
                $(this).attr('disabled', true);
            }
        }
    } else {
        input.val(0);
    }
});

禁用加减号添加按钮

1 个答案: