通过敲除切换无线电按钮

Question

我在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>

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

如果某人选择了收音机1，则默认情况下选择无线电3，并禁用收音机4供选择。如果有人选择无线电2，他们可以选择无线电3或收音机4。

在第一次，默认的选择是收音机2和4。

我可以通过jquery来完成这个任务，但不确定如何通过剔除来处理这个问题。

有什么输入吗？

Answer 1

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

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

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

每个HTML的data_bind应该如下所示：

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_bind前面添加一个@，比如"@data_bind“。过去我就是这样做的，但我不确定MVC是否需要它。