Question

嗨大家我有问题，我有3个用户，每行有5个复选框（Html.CheckBoxFor）这些复选框用于为这些用户分配权限。我的问题是当CheckBox 2为第1行未选中时CheckBox第1行的1也应该是未选中的。但是这不会发生，而不是仅仅取消选中第1行，取消选中复选框1的整个列。这是我的Jquery函数。

function setRights() {
var personalReport = document.getElementById("personalReports");
alert(personalReport.value);
personalReport.addEventListener('change', function () {
    if (personalReport.value) {
        $($("form #viewAllReports").attr('checked', false));
    }
    else {
    }
});
}

“personalReports”和#viewAllReports“是我给Html.CheckboxFor（s）的ID。这确实有效，但不是我想要的方式，我猜我在这里要求的是一种方法来唯一地识别所有这些行，我可以在jquery中指定它以获得将影响的所需结果只是忙着忙。提前谢谢。

这是我的观看代码：

    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.PersonalReports, new { id = "personalReports", onclick   = "setRights();" })
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.ViewAllReports, new { id = "viewAllReports"})
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.EditAI)
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.ReportBranding)
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.PersonalizeTheme)
    </div>
    <div class="chkbox">
    @Html.CheckBoxFor(m => m.Search)
    </div>
    <div class="chkbox">
    @Html.CheckBoxFor(m => m.RequestOutOfBundleSearch)
    </div>

Answer 1

当我们使用Html.xxxxxxFor(m => m.property)时，总会有一个问题：jQuery选择器如何获取该元素？

@ [gdoron]所说的部分正确：Html.xxxxxxFor(m => m.property)使用id和name构建一个等于属性名称的HTML元素，除非：

属性来自嵌套模型，例如：model.Address.Street
属性是一个数组或集合，如：model.Order[0]

虽然您的视图很简单并且不使用上述任何方案，但为了jQuery Selector，我仍然更喜欢为元素添加HTML属性。

以下代码对我来说非常适合：

@Html.CheckBoxFor(m => m.BoolValue1, new { value = "check-box-1" }) Check Box 1 (drives check box 2)
<br />
@Html.CheckBoxFor(m => m.BoolValue1, new { value = "check-box-2" }) Check Box 2


<script type="text/javascript">
    $(function () {
        $('input[value="check-box-1"]').bind('change', function () {
            personalReports_changed();
        });
    });

    function personalReports_changed() {
        if ($('input[value="check-box-1"]').attr('checked'))
            $('input[value="check-box-2"]').attr('checked', true);
        else
            $('input[value="check-box-2"]').removeAttr('checked');
    }
</script>

Answer 2

虽然我已经回答了这个问题，但我想提出一个相对更复杂的场景，并展示如何通过使用jQuery管理复选框以影响彼此。

情景

想象一下，我们有一本书的清单（来自数据库或任何其他存储库）
用户可以说：“我喜欢这本书。”
用户可以说：“我喜欢这本书。”

规则：

如果用户喜欢一本书，那就意味着他/她喜欢。
如果用户喜欢一本书，他/她就不能爱。

<强>代码

型号：

namespace MvcApplication1.Models
{
    public class Book
    {
        public string Title { get; set; }
        public bool IsLikeIt { get; set; }
        public bool IsLoveit { get; set; }
    }

    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

视图模型：

namespace MvcApplication1.ViewModels
{
    public class BookViewModel
    {
        public Models.Person User { get; set; }
        public List<Models.Book> Books { get; set; }
        public BookViewModel()
        {
            Books = new List<Models.Book>();
        }
    }
}

Controlers：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        BookViewModel viewModel = new BookViewModel();

        viewModel.User = new Models.Person() 
                   { FirstName = "John", LastName = "Smith" };
        viewModel.Books.Add(new Models.Book() 
                   { Title = "Beginning ASP.NET 4: in C# and VB" });
        viewModel.Books.Add(new Models.Book() 
                   { Title = "Professional ASP.NET 4 in C# and VB" });
        viewModel.Books.Add(new Models.Book() 
                   { Title = "Pro ASP.NET MVC 3 Framework" });
        viewModel.Books.Add(new Models.Book() 
                   { Title = "Microsoft ASP.NET CODING STRATEGIES-W/ ASP .NET TEAM" });
        viewModel.Books.Add(new Models.Book() 
                   { Title = "Pro ASP.NET 4 in C# 2010, Fourth Edition" });

        return View(viewModel);
    }

    [HttpPost]
    public ActionResult Index(BookViewModel viewModel)
    {
        //save data.
        return View(viewModel);
    }

}

查看（\ Home \ Index.cshtml）：

@using MvcApplication1.Models
@model MvcApplication1.ViewModels.BookViewModel
<div>
    <p>
        User name: @Html.DisplayFor(u => u.User.FirstName)
        @Html.DisplayFor(u => u.User.LastName)</p>
</div>
<div>
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(u => u.User.FirstName)
        @Html.HiddenFor(u => u.User.LastName)

        <table border="1">
            <thead>
                <tr>
                    <th>
                        I like it
                    </th>
                    <th>
                        I Love it
                    </th>
                    <th>
                        Book title
                    </th>
                </tr>
            </thead>
            <tbody>
                @for (int index = 0; index < Model.Books.Count; index++)
                {
                    <tr>
                        <td>@Html.CheckBoxFor(b => b.Books[index].IsLikeIt, new { id = string.Format("like-it-{0}", index), data_index = index })
                        </td>
                        <td>@Html.CheckBoxFor(b => b.Books[index].IsLoveit, new { id = string.Format("love-it-{0}", index), data_index = index })
                        </td>
                        <td>@Html.DisplayFor(b => b.Books[index].Title)
                            @Html.HiddenFor(b => b.Books[index].Title)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <input type="submit" value="Submit" />
    }
</div>
<script type="text/javascript">

    $(function () {
        $('input[id^="like-it-"]').change(function (e) { likeit_clicked(e); });
        $('input[id^="love-it-"]').change(function (e) { loveit_clicked(e); });
    });

    function likeit_clicked(event) {
        if (!event.target.checked) {
            var index = $(event.target).attr('data-index');
            var loveitid = '#love-it-' + index;
            $(loveitid).attr('checked', false);
        }
    }

    function loveit_clicked(event) {
        if (event.target.checked) {
            var index = $(event.target).attr('data-index');
            var likeitid = '#like-it-' + index;
            $(likeitid).attr('checked', true);
        }
    }

</script>

查看可能看起来很糟糕。您可以根据自己的需求开发出更好的视图。

顺便说一句，在MVC视图引擎生成的渲染html中，您可以看到复选框的长名称：

name="Books[0].IsLikeIt"
name="Books[1].IsLikeIt"
name="Books[2].IsLikeIt"
.
.
.

但是通过生成我们自己的id（id = string.Format("like-it-{0}", index)）并定义data-index属性，jQuery可以以适当的方式选择和更改此复选框。

另请阅读：HTML5 Custom Data Attributes (data-*)

如何使用Jquery动态更改HTML.CheckBoxFor

2 个答案: