Question

我想在达到1时禁用递减按钮。首先我在jsp中使用jstl这样做。

<c:choose>
    <c:when test="${line.quantity > 1}">
    <form method='post' action='<c:url value="decrement"/>'>
                <input type='hidden' name='productName' value='${line.product.productName}'/>
                <input type='hidden' name='id' value='${line.product.id}'/>
                <input type="submit" value="-" />
          </form>
    </c:when>
    <c:otherwise>
      <input type="button" disabled="disabled"/>
    </c:otherwise>
    </c:choose>

现在我正在学习Javascript，并尝试将上述代码转换为JS。

<script type="text/javascript">
    function decrementButton() {
    var x = document.getElementById('quantity').value;
    alert("Value of x = " + x);
    if ( x > 1)
    {    
        document.getElementById('submit').disabled = false;
        alert('Dont Disable');
    }
    else
    {    
        document.getElementById('submit').disabled = true;
        alert('Disable'); 
    }
        }
  </script>

</head>
<body onLoad="decrementButton();">
<h1>CART</h1>
    <c:forEach items="${cart.cartLines}" var="line">
<tr>
<td>
<form  method='post' action='<c:url value="decrement"/>'>
                <input type='hidden' name='productName' value='${line.product.productName}'/>
                <input type='hidden' name='id' value='${line.product.id}'/>
                <input id="quantity" type='text' 
                    style="width:25px;" name='quantity' value='${line.quantity}'/>
                <input  id="submit" type="submit" value="-" />
          </form>

    </td>
</tr>
</c:forEach>

它仅适用于购物车中的第一个产品。那么我应该如何使用javascript为购物车中的每个产品做到这一点。

Answer 1

您无法为多个输入指定相同的ID，只需将所有name设置为相同的值即可，例如name="myProduct"。然后你可以用这种方式实现这一点：

//look for all elements input with name="myProduct" instead of ById
 var productsList = document.getElementsByName('myProduct');
 //you got 1 submit button / product
 var submitButtonsList = document.getElementsByName('myProductSubmitButton');
 for (var i = 0; i <= productsList.length; i++) {

     alert("Value of productsList  = " + productsList[i].value);
     if (productsList[i].value > 1) {
         submitButtonsList[i].disabled = false;
         alert('Dont Disable');
     } else {
         submitButtonsList[i].disabled = true;
         alert('Disable');
     }
 }

这将遍历您网页的所有产品以及每个产品的每个提交按钮。

Answer 2

我建议使用jQuery，它会使所有DOM更改脚本变得更加容易，只需在使用以下函数之前添加到其他地方或其他地方：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然后您可以使用以下内容：

<script type="text/javascript">
 function decrementButton() {
      $('form').each(obj, function(){
          value = $(this).find($("#quantity")).val();
          if(value <= 1){
              $(this).find($( "#submit" )).attr('disabled', 'disabled');
           });
      }  
   }
 </script>

如何为每个启用/禁用按钮使用

2 个答案: