無効プラスプラスマイナス追加ボタン

Question

マイページに複数の追加（+/-）カートボタンがあります。ボタンの1つが3つのうちの1つを増分した場合、残りのボタンはすべて増減できません。

<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

問題は、次のとおりです。

• 2つの入力と同じ名前を持つ：hr_sec_b[1]
• すべてのボタンが同じdata-field="hr_sec_b[1]"値
• ミッシングボタン+と持っている - ラベルを。
• 最小/最大値に達すると、固定ボタンが無効/有効になります。

Working JSFiddle example

修正されたHTMLの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); 
    } 
}); 

を修正

<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>