如何动态更改 HTML.复选框用于使用 Jquery

嗨，伙计们，我有一个问题，我有 3 行用户，每行有 5 个复选框（Html.CheckBoxFor）这些复选框用于为这些用户分配权限。我的问题是，当取消选中第 2 行的复选框 1 时，也应取消选中第 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>

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

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

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

虽然你的视图很简单，没有使用上述任何场景，但我仍然更喜欢为元素添加一个HTML属性，以便jQuery选择器。

以下代码非常适合我：

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

虽然我已经回答了这个问题，但我想提出一个相对更复杂的场景，并展示我们如何通过使用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>();
        }
    }
}

控制器：

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

View （\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 自定义数据属性（data-*）

相关内容

最新更新

热门标签：