blazor 在单击时将复选框更改为禁用答案

【问题标题】：blazor change checkbox to disabled when clickedblazor 在单击时将复选框更改为禁用
【发布时间】：2021-06-12 01:41:06
【问题描述】：

我在 foreach 中有一个这样的复选框：

    @foreach (var m in message)
{
    <div>
        Mark as read:
  
        <input type="checkbox" value="@m.Idmsg" id="@m.Idmsg" @onclick="@(() => CheckedReadMsg(Items, m.Idmsg, UserName))" disabled="@CBDisabled" />

    </div>

}

我的 Razor 页面是这样的：

     async Task CheckedReadMsg(MultiSelectList e, int IDMSG2, string UserConfirming)
    {
        await repoRelationships.ConfirmCheckBox(IDMSG2, UserConfirming);
        CBDisabled = true;
    }

我在那里看到了几个关于如何修复它的示例，但是当触发 CBDisabled 时，它会禁用所有复选框。有什么想法吗？

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

这是在独立 Razor 页面中演示的略有不同的解决方案。您将需要一个 Ack 属性在您的 message 类中。有两种格式略有不同的版本，一种是可以点击整个消息，另一种是只能点击复选框。我添加了一些颜色格式。

@page "/checkbox"
<h3>CheckBoxes 1</h3>
@foreach (var message in messages)
{
    <div class="p-2 m-2 @GetColor(message.Ack)" style="cursor:pointer" @onclick="() => SetRead(message.MessageID)">
        <input type="checkbox" value=@message.Text disabled=@message.Ack checked=@message.Ack />
        <span class="px-3">@message.Text</span>
    </div>
}
<h3>CheckBoxes 2</h3>
@foreach (var message in messages)
{
    <div class="p-2 m-2 @GetColor(message.Ack)">
        <input type="checkbox" value=@message.Text disabled=@message.Ack checked=@message.Ack @onclick="() => SetRead(message.MessageID)" />
        <span class="px-3">@message.Text</span>
    </div>
}

@code {

    class Message
    {
        public string Text { get; set; }
        public Guid MessageID { get; } = Guid.NewGuid();
        public bool Ack { get; set; }
    }

    List<Message> messages = new List<Message>
{
          new Message { Text = "Message 1" }, 
          new Message { Text="Message 2" }, 
          new Message { Text="Message 3" }
    };

    string GetColor(bool ack)
        => ack ? "bg-success" : "bg-light";

    private void SetRead(Guid id)
    {
        var message = messages.FirstOrDefault(item => item.MessageID.Equals(id));
        message.Ack = true;
    }

}

【讨论】：

【解决方案2】：

这里的问题是单个 bool CBDisabled 正在控制所有复选框的 disabled 属性。要解决此问题以便可以独立禁用每个复选框，您需要为每个复选框设置一个布尔值。有很多方法可以做到这一点，但这里是如何使用字典来跟踪每个复选框的禁用状态：

public class MyClass
{
  private readonly Dictionary<string, bool> disabledStates = new Dictionary<string, bool>();

  protected override void OnInitialized()
  {
    // once `message` exists, populate the dictionary with the needed key/value pairs
    foreach (var m in message)
    {
      // we assume that `m.Idmsg` is unique across all "messages"
      disabledStates.Add(m.Idmsg, false);
    }
  }

  async Task CheckedReadMsg(MultiSelectList e, int IDMSG2, string UserConfirming)
  {
    await repoRelationships.ConfirmCheckBox(IDMSG2, UserConfirming);
    // disable the clicked checkbox only
    disabledStates[m.Idmsg] = true;
  }
}

@foreach (var m in message)
{
    <div>
        Mark as read:
  
        <input type="checkbox" value="@m.Idmsg" id="@m.Idmsg" @onclick="@(() => CheckedReadMsg(Items, m.Idmsg, UserName))" disabled="@disabledStates[m.Idmsg]" />

    </div>

}

【讨论】：

【解决方案3】：

您没有包含每一行的状态。您似乎对所有行都使用了一个值 CBDisabled。这里的所有其他答案都是正确的。解决此问题的最简单方法是将 @foreach 循环的内容分解为另一个组件。

@foreach (var m in message)
{
    <MarkAsRead Message="@m"/>
}

MarkAsRead.razor

<div>
    Mark as read:

    <input type="checkbox" value="@Message.Idmsg" id="@Message.Idmsg" @onclick="@(() => CheckedReadMsg(Items, Message.Idmsg, UserName))" disabled="@CBDisabled" />

</div>

@code {
    ...

    bool CBDisabled = false;

    [Parameter]
    public SomeClass Message { get; set; }

    async Task CheckedReadMsg(MultiSelectList e, int IDMSG2, string UserConfirming)
    {
        await repoRelationships.ConfirmCheckBox(IDMSG2, UserConfirming);
        CBDisabled = true;
    }
}

【讨论】：