você pode adicionar uma classe ao seu CheckBox
, então usar ela como seletor.
@Html.CheckBoxFor(model => item.Ativo, new { @class = "ckAtivo" })
e no jQuery fazer o seguinte.:
$("#tabelaTiposCartao").on("click", ".ckAtivo", function () {
console.log(this.value);
});
o this.value
vai ser o valor do checkbox. mas acredito que estaá abordagem faz o que você quer, porém não vai resolver o seu problema.
SUGESTÕES
Primeiro ponto seria quanto ao uso do foreach
para montar a sua tabela, ao faze-lo, o Razor
se perde na hora de atribuir um id e um name
aos inpus
,, então possivelmente você não vai receber os dados quando enviar eles de volta ao servidor.
então você tem duas opções, usar um for
ou o nuget BeginCollectionItem
usando um for
:
@for(var i = 0; i < Model.ListaProdutos.Count; i++)
{
<tr>
<td>@Model.ListaProdutos[i].Tipo</td>
<td align="right">@Model.ListaProdutos[i].Categoria</td>
<td>@Model.ListaProdutos[i].Descricao</td>
<td align="justify" onclick="AtivarProduto(@item.ID)">@Html.CheckBoxFor(model => Model.ListaProdutos[i].Ativo)</td>
</tr>
}
mas para usar esta abordagem, o seu ListaProdutos
precisa ser um Tipo concreto como um Array<T>
ou uma List<T>
e não uma interface como o IEnumerable<T>
, se este for o seu caso, a sua única opção será o pacote do nuget acima citado.
usando o BeginCollectionItem
:
using(Html.BeginCollectionItem("ListaProdutos"))
{
<tr>
<td>@Html.DisplayFor(model => model.Tipo)</td>
<td align="right">@Html.DisplayFor(model => model.Categoria)</td>
<td>@Html.DisplayFor(model => model.Descricao)</td>
<td align="justify" onclick="AtivarProduto(@model.ID)">@Html.CheckBoxFor(model => model.Ativo)</td>
</tr>
}
Agora por valor do CheckBox
, ele vai ter o valor da propriedade Ativo
, ou seja true
ou false
, mas se você estiver interessado no ID
, você terá de armazena-lo em algum lugar, como por exemplo em um Hidden
.
E eu aplicaria uma classe na linha, para que eu pudesse pegar ela no javaScript e usar a linha como escopo para as minhas funções futuras.
using(Html.BeginCollectionItem("ListaProdutos"))
{
<tr class="trProduto">
<td>@Html.DisplayFor(model => model.Tipo)</td>
<td align="right">@Html.DisplayFor(model => model.Categoria)</td>
<td>@Html.DisplayFor(model => model.Descricao)</td>
<td align="justify">
@Html.HiddenFor(model => model.ID)
@Html.CheckBoxFor(model => model.Ativo)
</td>
</tr>
}
agora segue o script:
var Produto = new Produto(container) {
var that = this;
this.dom = {};
this.dom.linha = container;
this.dom.celulas = this.dom.linha.querySelectorAll("td");
this.dom.id = this.dom.linha.querySelector("[id$=ID]");
this.dom.ativo = this.dom.linha.querySelector("[id$=Ativo]");
this.dom.ativo.addEventListener("click", function () {
that.onAtivoClick();
});
this.dom.celulas[3].addEventListener("click", function () {
that.onCelula4Click();
});
}
Produto.prototype.onAtivoClick = function () {
console.log(this.dom.id.value);
}
Produto.prototype.onCelula4Click = function () {
AtivarProduto(this.dom.id.value);
}
var containers = document.querySelectorAll(".trProduto");
[].forEach.call(produtos, function (container, indice) {
var produto = new Produto(container);
});
no script acima, ele seleciona todas as linhas com a classe .trProduto
então para cada linha ele procura os inputs cujo id
termina com ID
eAtivo
.
Porém tomei a liberdade de criar uma "Classe" para ajudar a delimitar um escopo para cada linha, aqui chamado de produto.
se precisar ter acesso a outros dados, tais como o Tipo
, Categoria
ou Descricao
, então crie um HiddenFor
para eles também e faça a busca por eles dentro do objeto Produto
, uma alternativa é pegar a propriedade textContent
de this.dom.celulas[i]
, onde i
será 0
, 1
ou 2
.