Флажок ASP.NET не проверяется с помощью jQuery

Question

Я пытаюсь сделать мои флажки в GridView более легкими для проверки для пользователя. Я добавил несколько jQuery, чтобы сделать элемент <td> доступным и установите флажок. Эта часть работает. Проблема в том, что когда пользователь нажимает фактический флажок, он не будет проверять. Когда я отлаживаю свой код, кажется, что .is (": checked") неверно возвращается. Любая помощь будет оценена.

Мои GridView ItemTemplate

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%" 
     ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" > 
    <ItemTemplate> 
     <asp:CheckBox id="chkBxPSelect" runat="server" /> 
    </ItemTemplate> 
    </asp:TemplateField> 

Я также попытался обертывание флажок в метке, а также якорный тег, а не дало никаких результатов.

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" > 
    <ItemTemplate> 
     <label style="display:block;"> 
      <asp:CheckBox ID="chkBxPSelect" runat="server" /> 
     </label>                                    
    </ItemTemplate> 

Мой JQuery

$(".chk").click(function (e) 
{ 
    var checkBox = $(this).find("input:checkbox:first"); 

    if (checkBox.is(":checked")) 
    { 
     checkBox.prop("checked", false); 
    } 
    else 
    { 
     checkBox.prop("checked", true); 
    } 
}); 

Любые идеи?

EDIT Я также попытался добавить к нему флажок. Кажется, что проверка того, что флажок установлен, с помощью `.is (": checked "), не сообщает о правильном состоянии флажка.

$('input[id$="chkBxPSelect"]').click(function() 
{ 
    if ($(this).is(":checked")) 
    { 
     $(this).prop("checked", false); 
    } 
    else 
    { 
    $(this).prop("checked", true); 
    } 

});

И Я попробовал это также из предложения ниже.

$('input[id$="chkBxPSelect"]').click(function() 
{ 
    e.preventDefault(); 
    //e.stopPropagation(); 

}); 

и по-прежнему галочка не будет проверяться при нажатии на фактический флажок.

Answer 1

Это может работать:

$(".chk").click(function (e) 
{ 
    var checkBox = $(this).find("input:checkbox:first"); 
    if (checkBox.is(":checked")) 
    { 
     checkBox.prop("checked", false); 
    } 
    else 
    { 
     checkBox.prop("checked", true); 
    } 
}); 

$(".chk input[type=checkbox]:first").click(function (e) 
{ 
    e.preventDefault(); 
    e.stopPropagation(); 
}); 

Я не уверен, нужно ли вам preventDefault или stopPropagation, но я считаю, что это stopPropagation предотвратить флажок click от барботирования до своего родителя td.

Другим возможным решением было бы это. Если он работает, я бы рекомендовал его, так как он не требует какого-либо сценария:

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%" 
     ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" > 
    <ItemTemplate> 
     <label style="display:block;"> 
      <asp:CheckBox id="chkBxPSelect" runat="server" /> 
     </label> 
    </ItemTemplate> 
</asp:TemplateField> 

Когда флажок обернут внутри <label> элемента, щелкнув что-нибудь внутри этого ярлык будет переключать состояние проверяется CheckBox в. Предоставляя ярлыку отображение: стиль блока, этот должен занять все пространство ячейки таблицы (td), которое находится внутри. Таким образом, щелчок в любом месте td должен в threory переключить этот флажок.

Answer 2

Update: Вы могли бы выполнить свою задачу таким образом, то:

<td class="Validate"> 
    <asp:Checkbox id="chkSelect" runat="server" class="chkSelect" ... /> 
</td> 

Добавляя элемент класса, это даст Jquery что-то якорь на. Тогда вы могли бы сделать:

$('.Validate').click(function() { 
    var item = $(this).find('.chkSelect'); 
    if(item.is(':checked') { 
     item.prop('checked', false); 
    } else { 
     item.prop('checked', true); 
    } 
}); 

Итак, когда вы щелкаете ваш td JQuery будет выполняться, как и для нахождения вашего входа, вы дали ему идентификатор класса, который отражает ваш идентификатор. Итак, вы используете find для поиска дочерних элементов в пределах td element. Это должно найти ваш вход, тогда вы просто сделаете свой чек с помощью var, который установил флажок.

---

Вы могли бы по существу сделать следующее, которое обеспечит захват вашего контроля.

$('#<%= chkBxPSelect.ClientID %>').click(function() { 
    if($(this).is(':checked')) { 
     $(this).prop('checked', false); 
    } else { 
     $(this).prop('checked', true); 
    } 
}); 

Если $(this) не работает использовать полный идентификатор, как указано выше, но оценка Microsoft должна решить проблему. Ваш другой подход в JavaScript будет:

$(this).find('input[type="checkbox"]:first'); 

Я считаю, что это тоже должно сделать трюк. Вы можете протестировать его, но я бы использовал первый подход с веб-формами.

Answer 3

У меня это выяснено с помощью @danludwig. Мне нужно было добавить обработчик кликов к флажку AND и e.stopPropagation(), чтобы предотвратить событие от пузырьков до td. Мне также пришлось обернуть флажок в теге метки и добавить к нему флажок CssClass, чтобы сделать его проще.

My new checkbox.

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%" 
     ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk"> 
    <ItemTemplate> 
     <label style="display:block;"> 
      <asp:CheckBox ID="chkBxPSelect" runat="server" CssClass="chkBox" /> 
     </label> 
    </ItemTemplate> 
</asp:TemplateField> 

Мои новые методы JQuery:

$(".chk").click(function (e) 
{ 

    var checkBox = $(this).children("input:checkbox:first"); 


    if (checkBox.is(":checked")) 
    { 
     checkBox.prop("checked", false); 
    } 
    else 
    { 
     checkBox.prop("checked", true); 
    }  

}); 



$(".chkBox").click(function (e) 
{ 
    e.stopPropagation(); 

    if ($(this).is(":checked")) 
    { 
     $(this).prop("checked", false); 
    } 
    else 
    { 
     $(this).prop("checked", true); 
    } 

});