この質問にはすでに答えていますが、比較的複雑なシナリオを取り上げて、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);
}
}
ビュー (\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-*)