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

Question

我在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时，它会禁用所有复选框。一些有想法的家伙？

Answer 1

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

@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;
}
}

Answer 2

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

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>
}

Answer 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;
}
}