jQuery selettore per "Html.CheckBoxFor"

Question

C'è un modo utilizzando asp.net/jquery per attivare o disattivare una visibilità div quando si utilizza una casella di controllo come questo:

<%: Html.CheckBoxFor(m => m.Type) %>

so come fare la parte jQuery , ma non sono sicuro di come determinare se la casella è stata selezionata o modificata. C'è una sorta di onChange o onClick che posso aggiungere a questo?

EDIT - Consentitemi di cambiare questo un po '... COME posso assegnare un id all'Html.CheckBoxFor() ??

Answer 1

Si potrebbe sottoscrivere l'evento .change() e .toggle() la visibilità del div a seconda che la casella di controllo è stato controllato o no:

$(function() { 
    $('#mycheckbox').change(function() { 
     var isChecked = $(this).is(':checked'); 
     $('#someDivId').toggle(isChecked); 
    }); 
}); 

e si può see it in action here.

Per identificare questa casella di controllo si potrebbe o assegnare un ID univoco:

<%: Html.CheckBoxFor(m => m.Type, new { id = "mycheckbox" }) %> 

o di una classe:

<%: Html.CheckBoxFor(m => m.Type, new { @class = "check" }) %> 

e quindi adattare il vostro selettore jQuery.

Answer 2

Sì, c'è un evento onclick/onchange per la maggior parte dell'elemento html.

Lasciate assumere la tua casella di controllo ha un id = "CheckBox1", è possibile effettuare le seguenti operazioni

var myCheckBox = document.getElementById("checkbox1"); 
myCheckBox.addEventListener('change', function(){do something}, false); 

Answer 3

Vai a questa domanda: get the generated clientid for a form field, questa è la mia risposta:

io uso questo helper:

public static partial class HtmlExtensions 
{ 
    public static MvcHtmlString ClientIdFor<TModel, TProperty>(
     this HtmlHelper<TModel> htmlHelper, 
     Expression<Func<TModel, TProperty>> expression) 
    { 
     return MvcHtmlString.Create(
       htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(
        ExpressionHelper.GetExpressionText(expression))); 
    } 
} 

utilizzarlo proprio come si farebbe con qualsiasi altro aiutante: @ Html.ClientIdFor (modello => model.client.email)

o nello script:

$(function() { 
    $('#@Html.ClientIdFor(m=>m.Type)').change(function() { 
     // Do stuff 
    }); 
});