Asp.net mvc 通过敲除按钮切换radiobutton

我在mvc中创建了大约4个单独的单选按钮，如下所示：

<div class="col-md-10">
        <label class="radio-inline">
            @Html.RadioButtonFor(m => m.rad1, "" ,htmlAttributes: new { 
data_bind = "checked: ischecked", id = "rad1" }) Radio 1
        </label>
        <label class="radio-inline">
            @Html.RadioButtonFor(m => m.rad2, "" ,htmlAttributes: new { data_bind = "checked: ischecked", id = "rad2" }) Radio 2
        </label>
    </div>

    <div class="col-md-10">
        <label class="radio-inline">
            @Html.RadioButtonFor(m => m.rad3, "", htmlAttributes: new { data_bind = "checked: ischecked", id = "rad3" }) Radio 3
        </label>
        <label class="radio-inline">
            @Html.RadioButtonFor(m => m.rad4, "", htmlAttributes: new { data_bind = "checked: ischecked", id = "rad4" }) Radio 4
        </label>
    </div>

@RadioButton（m=>m.rad1，”，htmlAttributes:new{
数据\u bind=“checked:ischecked”，id=“rad1”}）无线电1
@RadioButton（m=>m.rad2，”，htmlAttributes:new{data_bind=“checked:ischecked”，id=“rad2”}）Radio2
@RadioButton（m=>m.rad3，”，htmlAttributes:new{data_bind=“checked:ischecked”，id=“rad3”}）Radio3
@RadioButton（m=>m.rad4，”，htmlAttributes:new{data_bind=“checked:ischecked”，id=“rad4”}）Radio4

收音机3和4取决于收音机1和2

如果有人选择了收音机1，则默认情况下会选择收音机3，并且禁用收音机4进行选择。 如果有人选择收音机2，他们可以选择收音机3或收音机4

第一次默认选择为收音机2和4

我可以通过jquery实现这一点，但不确定如何通过knockout处理这一点

---

有什么输入吗？

您需要做一些事情。您需要在视图模型中为每个单选按钮创建一个专用的ischecked observable，并为视图模型中的每个相关单选按钮单击事件创建一个函数，然后将规则放入这些函数中。此外，您还需要rad4上的可观察设备来启用/禁用它。然后，为每个数据绑定属性添加事件绑定以处理这些单击事件

最终结果视图模型应如下所示：

var myViewModel = function() {
    var self = this;

    self.rad1IsChecked = ko.observable();
    self.rad2IsChecked = ko.observable();
    self.rad3IsChecked = ko.observable();
    self.rad4IsChecked = ko.observable();

    self.rad4IsEnabled = ko.observable();

    self.rad1OnClick = function() {
        //Put whatever rules in here that you need, like this...
        if (self.rad1IsChecked()) {
            self.rad3IsChecked(true);
            self.rad4IsEnabled(false);
        }

        return true; //Need this to propagate click event, so that button works as usual.
    }

    self.rad2OnClick = function() {
        //Put whatever rules in here that you need, like this...
        if (self.rad2IsChecked()) {
            self.rad3IsChecked(false);
            self.rad4IsEnabled(true);
        }

        return true; //Need this to propagate click event, so that button works as usual.
    }
}

data_bind = "checked: rad1IsChecked, event: {click: rad1OnClick}"
data_bind = "checked: rad2IsChecked, event: {click: rad2OnClick}"
data_bind = "checked: rad3IsChecked"
data_bind = "checked: rad4IsChecked, enable: rad4IsEnabled"

您的HTML数据绑定应该如下所示：

var myViewModel = function() {
    var self = this;

    self.rad1IsChecked = ko.observable();
    self.rad2IsChecked = ko.observable();
    self.rad3IsChecked = ko.observable();
    self.rad4IsChecked = ko.observable();

    self.rad4IsEnabled = ko.observable();

    self.rad1OnClick = function() {
        //Put whatever rules in here that you need, like this...
        if (self.rad1IsChecked()) {
            self.rad3IsChecked(true);
            self.rad4IsEnabled(false);
        }

        return true; //Need this to propagate click event, so that button works as usual.
    }

    self.rad2OnClick = function() {
        //Put whatever rules in here that you need, like this...
        if (self.rad2IsChecked()) {
            self.rad3IsChecked(false);
            self.rad4IsEnabled(true);
        }

        return true; //Need this to propagate click event, so that button works as usual.
    }
}

data_bind = "checked: rad1IsChecked, event: {click: rad1OnClick}"
data_bind = "checked: rad2IsChecked, event: {click: rad2OnClick}"
data_bind = "checked: rad3IsChecked"
data_bind = "checked: rad4IsChecked, enable: rad4IsEnabled"

---

此外，您可能必须在数据绑定前面加一个@，如“@data\u bind”。我过去就是这样做的，但我不确定MVC是否需要它。

您的KO模型在哪里？我只是将其设置为：this.ischecked=KO.observable（）；我不知道如何处理这里的切换，请花一点时间阅读下面的答案。这解决了吗？是的，谢谢。做了一些修改以适应我的代码。很好，很高兴听到它！