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

how to enable/disable button using for each

本文关键字：按钮 启用      更新时间：2023-09-26

当减量按钮达到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为购物车中的每个产品做这件事呢。

您不能为多个输入指定相同的ID，然后将它们的所有name设置为相同的值，比如name="myProduct"。然后你可以用JS这样实现：

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

这将循环浏览您页面的所有产品，以及每个产品的每个提交按钮。

我建议使用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>
相关文章：