单击按钮时，特定表行上的C＃MVC文本框（禁用）

Question

我有一个表，其值与我的产品列表一起循环，并且有一个“数量”文本框和一个“添加到购物车”按钮。 当我单击“添加到购物车”按钮时，我会尝试这样做，它将检查“数量”值是否具有值，然后“数量”文本框将仅针对该特定行被禁用。

Product.cshtml

<table id ="productList" class="table table-dark">
    <tr>
        <th>Product ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Add to cart</th>
    </tr>
    @foreach (var item in Model)
        {
            <tr class="active">
                <td>@item.Id</td>
                <td>@item.Title</td>
                <td>@item.Description</td>
                <td>@Html.TextBox("Quantity", "0", new { @class = "form-control" })</td>
                <td><button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button></td>
            </tr>
        }
</table>

JavaScript的

function disableText(QtyVal) {
    if(QtyVal.value == '')
    {
        document.getElementById("Quantity").value = 1;
    }
}

当前，项目的输出是每次单击任何提交按钮时，它将始终更新第一行（这是不正确的）。

目标是它将更新“数量”并为该特定行禁用它

Answer 1

您的问题出在以下按钮定义中：

<button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button>

foreach循环为所有按钮生成重复的id属性值，这将生成无效的HTML并导致不良行为。 由于您的表还包含<input>标记，因此您应该使用for循环而不是foreach并将不同的类名添加到按钮，例如buttonadd ：

<!-- assumed that @model List<Product> is used -->
<table id ="productList" class="table table-dark">
    <tr>
        <th>Product ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Add to cart</th>
    </tr>
    @for (int i = 0; i < Model.Count; i++)
    {
       <tr class="active">
           <td>@Model[i].Id</td>
           <td>@Model[i].Title</td>
           <td>@Model[i].Description</td>
           <td>@Html.TextBox("Quantity", "0", new { @class = "form-control" })</td>
           <td><button type="button" class="btn btn-default pull-left buttonadd">Add To Cart</button></td>
       </tr>
    }
</table>

然后，您可以引用buttonadd类作为选择器，以找出按钮包含的行，并将<input>状态设置为readonly （未disabled因为您希望在表单提交时发送数量值；在提交过程中不包括所有具有disabled属性的输入）如下例所示：

$(document).on('click', '#productList .buttonadd', function () {
    var row = $(this).closest('tr');

    // find quantity text box in the same row as clicked button
    var qty = row.find('input');

    // set quantity value and prevent user input
    qty.val(parseInt(qty.val()) + 1);
    qty.attr('readonly', 'readonly');
});

注意：如果要使用强类型的帮助器，请使用@Html.TextBoxFor ：

@Html.TextBoxFor(m => m[i].Quantity, new { @class = "form-control" })

实时示例： .NET Fiddle

Answer 2

由于所有文本框都具有相同的ID，因此您无法在js中指定要更新的文本框。 尝试为您的TextBox提供唯一的ID，然后在getElementById（“ UniqueID”）时，可以确保选择正确的文本框。

Answer 3

您只需要在按钮单击事件中添加以下代码

(this).prev('input').attr("disabled", "disabled")

Answer 4

使用局部视图，省去一些头痛。

<table id ="productList" class="table table-dark">
    <tr>
        <th>Product ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Add to cart</th>
    </tr>
    @foreach (var item in Model)
    {
        @Html.Partial("~/Views/_OrderRowPartial.cshtml", item)
    }
</table>

_OrderRowPartial.cshtml：

@model item
<tr class="active">
    <td>@item.Id</td>
    <td>@item.Title</td>
    <td>@item.Description</td>
    <td>@Html.TextBoxFor(m => m.Quantity,  new { @class = "form-control quantity" })</td>
    <td><button class="btn btn-default pull-left" onclick="disableText();">Add To Cart</button></td>
</tr>

使用Javascript：

function disableText(t, el) {
  var qty = el.parentElement.previousElementSibling.getElementsByTagName('input')[0];
  mytd.style.border = "1px solid #00FF00";
  console.log(qty.value);
  if (qty.value == '') {
    qty.value = 1;
  }
}

这是一个示例，其中我在内容上设置了边界以使正在发生的事情变得显而易见。 不清楚是否要禁用输入或按钮，所以我都做了。

 function disableText(t, el) { el.style.border = "2px solid #FF0000"; var mytd = el.parentElement; mytd.style.border = "1px solid #00FF00"; var mytr = mytd.parentElement; var qtytd = mytd.previousElementSibling; var qty = qtytd.getElementsByTagName('input')[0]; qtytd.style.border = "2px solid orange"; qty.style.border = "2px solid cyan"; console.log(qty.value); if (qty.value == '') { qty.value = 1; } // disable button el.setAttribute("disabled", "disabled"); qty.setAttribute("disabled", "disabled"); } 

 <table id="productList" class="table table-dark"> <tr> <th>Product ID</th> <th>Title</th> <th>Description</th> <th>Quantity</th> <th>Add to cart</th> </tr> <tr class="active"> <td>1234d</td> <td>Cherry Pie</td> <td>Gooey cherry pie</td> <td><input type="text" class="form-control quantity" value="2" .> <td><button class="btn btn-default pull-left" onclick="disableText('',this);">Add To Cart</button></td> </tr> <tr class="active"> <td>1234hd</td> <td>Hot Dog</td> <td>Dog, With mustard</td> <td><input type="text" class="form-control quantity" /></td> <td><button class="btn btn-default pull-left" onclick="disableText('',this);">Add To Cart</button></td> </tr> </table>