使用Jquery

时间:2017-08-14 13:35:07

标签: c# jquery asp.net-mvc razor radiobuttonfor

我有几个RadioButtonFor(razor),我正在尝试创建一个JQuery脚本,当你检查另一个按钮时,它会取消选中其他按钮。

我有一个带有一系列布尔值的模型,可以传递给Html Helper和打印机名称:

public class Mymodel
{    
    public List<PrinterModel> printers { get; set; }
    public bool noDefault { get; set; }
}

我的PrinterModel如下:

public class Printermodel
{
    public bool selected { get; set; }
    public string printerName { get; set; }
}

然后在我看来,

@using (Html.BeginForm()
{
<div class="form-group">
    for (var i = 0; i < Model.printers.Count(); i++)
    {
        @Html.RadioButtonFor(m => m.printers[i].selected, new { @class = "default" });
        @Html.Label(Model.printers[i].printerName);
        <br/>
    }
    @Html.RadioButtonFor(m=>m.noDefaultRadio, new { @class = "noDefault", @checked= "checked" });
    @Html.Label("No default printer");
</div>
}

我知道我可以在JQuery中使用.prop('checked', false)取消选中radiobox,所以我尝试在第一次播放中取消选中默认按钮:

$('.default').change(function () {
    if ($('.default:checked').length > 0) {
        $('.noDefault').prop('checked', false);
    }
    else {
        $('.noDefault').prop('checked', true);
    }
});

这没什么,但适用于复选框,为什么?

@checked="checked"默认情况下不会RadioButtonFor进行检查,我也尝试@checked = true而不是#{1}} 39;工作要么。

有什么想法吗?

编辑当按照建议尝试使用name="default"时,在导航器中检查页面时会看到以下输入:

<input data-val="true" id="printers_0__primarySelected" name="printers[0].primarySelected" type="radio" value="{ disabled = disabled }"

2 个答案:

答案 0 :(得分:1)

你能把单选按钮作为一个组的一部分吗?你想要做的事情听起来像默认行为。

您可以在RadioButtonFor调用中将name = "printerGroup"(或类似)添加到您的HTML属性中以将它们组合在一起吗?

<强>更新

退后一步,听起来像是要选择一个单选按钮。您应该在提交后将selectedId或某些标识符传递回控制器。我希望做出以下更改。

<强>模型

public class PrinterModel   
    {
        public int Id { get; set; }
        public string printerName { get; set; }
    }

public class MyModel
    {
        public List<PrinterModel> printers { get; set; } = new List<PrinterModel>();
        public string selectedId { get; set; } //This will be the id of what gets selected
    }

查看

@using (Html.BeginForm())
{
    <div class="form-group">
        @for (var i = 0; i < Model.printers.Count; i++)
        {
            @Html.RadioButtonFor(m => Model.selectedId, Model.printers[i].Id, new { name = "test" });
            @Html.Label(Model.printers[i].printerName);
            <br />
        }
        @Html.RadioButtonFor(m => Model.selectedId, "0", new { name = "test" })
        @Html.Label("No default printer")
    </div>
}

在您的控制器内部,您可以获取selectedId并使用它执行某些操作,如果传入0则为默认值(根据需要进行更改)。

答案 1 :(得分:0)

使用click代替change事件,因为一旦选中了广播,change事件就不会再次触发。

$('.default').click(function () {
    if ($('.default:checked').length > 0) {
        $('.noDefault').prop('checked', false);
    }
    else {
        $('.noDefault').prop('checked', false);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check .default <input type="radio" name="one" class="default" /> <br/>
Check .noDefault <input type="radio" name="two" class="noDefault" checked /> <br/>