如何通过单击同一行中的按钮来切换 enable/disable 一行中的复选框 table

Question

在table中，每行有一个button和一个checkbox。单击按钮时，我想切换 checkbox 的 enable/disable 状态（不是选中的值）。我的方法实际上是切换 table 中所有 checkbox 的 enable/disable 状态，但是我只希望影响特定行。

            <tbody>
                @foreach (var eachData in dataList)
                {
                    <tr>
                        <td>
                            <button @onclick="HandleToggleEvent">@SelectionButtonLabel</button>
                        </td>
                        <td>eachData.val1</td>
                        <td>
                            <input type="checkbox" id="flexSwitchCheckDefault" @bind="eachData.IsChecked" disabled=@(!IsRowSelected)>
                        </td>
                    </tr>
                }
            </tbody>

@code {
    private bool IsRowSelected { get; set; }
    private string SelectionButtonLabel = "Edit";

    private void HandleToggleEvent()
    {
        if (!IsRowSelected)
        {
            IsRowSelected = true;
            SelectionButtonLabel = "Cancel";
        }
        else
        {
            IsRowSelected = false;
            SelectionButtonLabel = "Edit";
        }
    }
}

Answer 1

您需要一个索引器。

私有列表 dataList = new List() { “一”、“二”、“三” };

private List<bool> IsRowSelected { get; set; } = new List<bool>();
private string SelectionButtonLabel = "Edit";

protected override void OnInitialized()
{
    foreach (var item in dataList) IsRowSelected.Add(false);
}

private void HandleToggleEvent(int idx)
{
    if (!IsRowSelected[idx])
    {
        IsRowSelected[idx] = true;
        SelectionButtonLabel = "Cancel";
    }
    else
    {
        IsRowSelected[idx] = false;
        SelectionButtonLabel = "Edit";
    }
}

不要忘记初始化列表并用 dataList 中每个值的值填充它。然后，在你的剃须刀代码中：

 <tbody>
     @for (int i = 0; i < dataList.Count; i++)
     {
         int idx = i; //This is important to avoid closing on i;
         <tr>
             <td>
                <button @onclick="() => HandleToggleEvent(idx)">@SelectionButtonLabel</button>
             </td>
             <td>dataList[i].val1</td>
             <td>
                <input type="checkbox" id="flexSwitchCheckDefault" disabled="@(!IsRowSelected[idx])">
             </td>
         </tr>
      }
</tbody>

然后您需要对 SelectionButtonLabel 执行相同的操作。

如何通过单击同一行中的按钮来切换 enable/disable 一行中的复选框 table

How to toggle enable/disable a checkbox in a row of a table by clicking a button in the same row

c#

.net-core

blazor

blazor-server-side