Question

我有两个单选按钮--Telerik MVC网格中的Approve和Deny，还在它们上应用了jquery buttonset（）。我需要检查每行选择哪个单选按钮。试图在jquery更改事件上这样做，但它没有激发。有什么想法吗？

    <div id="ApprovalDetail" class="content">
            <% 
        //To make columns visible/invisible
        string Actions = (string)ViewData["Actions"];

        //To store data back in Model
        for (int i = 0; i < Model.idrequest.Length; i++)
        {
            %>
            <%=Html.HiddenFor(model => model.idrequest[i].RequestDetailsId, new {@id="hiddenRequestDetailsId"+i.ToString()} )%>
            <%=Html.HiddenFor(model => model.idrequest[i].Approved, new {@id="hiddenApproved"+i.ToString()} )%>
            <%
                }


                 Html.Telerik().Grid(Model.idrequest)
                      .Name("IdRequest")

                      .DataKeys(dataKeys =>
                          {
                              dataKeys.Add(r => r.RequestDetailsId).RouteKey("RequestDetailsId");
                          }
                          )
                      .Columns(columns =>
                          {

                              columns.Bound(r => r.RequestDetailsId);
                              columns.Bound(r => r.EmpId);
                              columns.Bound(r => r.Name);
                              columns.Bound(r => r.Email);
                              columns.Bound(r => r.ADSId);
                              columns.Bound(r => r.Action);
                              columns.Bound(r => r.Role);

                              if (Actions != null)
                              {
                                  if (Actions.Contains("Suspend"))
                                  {
                                      columns.Bound(r => r.SuspensionDate).Format("{0:MM/dd/yyyy}").Width(100);
                                      columns.Bound(r => r.SuspensionReason);
                                  }

                                  if (Actions.Contains("Reactivate"))
                                      columns.Bound(r => r.ReactivationDate).Format("{0:MM/dd/yyyy}").Width(100);

                                  if (Actions.Contains("Delegate"))
                                  {
                                      columns.Bound(r => r.DelegateOwner);
                                      columns.Bound(r => r.DelegationStartDate).Format("{0:MM/dd/yyyy}").Width(100);
                                      columns.Bound(r => r.DelegationEndDate).Format("{0:MM/dd/yyyy}").Width(100);
                                  }
                              }

                              columns.Template(r =>
                             {
            %>
            <div class="radioStyle">
                <%= Html.RadioButton(r.RequestDetailsId.ToString(), 1, false, new { @id = "yes_Approve" + r.RequestDetailsId.ToString(), @group = "Approval" })%><label
                    for="yes_Approve<%= r.RequestDetailsId %>">Approve</label>
                <%= Html.RadioButton(r.RequestDetailsId.ToString(), 2, false, new { @id = "no_Approve" + r.RequestDetailsId.ToString(), @group = "Approval" })%><label
                    for="no_Approve<%= r.RequestDetailsId %>">Deny</label>
            </div>
            <%
                             }).Title("Approve");



                         })
                         .Pageable(paging => paging.Enabled(true).PageSize(10))
                         .KeyboardNavigation()
                         .Filterable(filtering => filtering.Enabled(true))
                         .Sortable(sorting => sorting.Enabled(true))
                         .Groupable(grouping => grouping.Enabled(true))
                         .Resizable(resizing => resizing.Columns(true))

                         .Render();



            %>
                        </div>


     <script type="text/javascript">
     $(document).ready(function () {

         //visuals
         $(function () {
             $("#approveRequest").button();
             $(".radioStyle").buttonset();


         });

     $('#IdRequest :radio[group=Approval]').each(function () {
             $(this).change(function () { alert("aa"); });

     });
     </script>

Answer 1

网格在onDocumentReady之后绑定。所以你需要使用特殊的telerik网格事件OnRowBound。使用.ClientEvents(c=>c.OnRowBound("bindGridRow")) 其中bindGrid将你将onchange事件绑定到单行单选按钮的函数。

Answer 2

您可以使用grid的OnLoad事件来绑定更改事件处理程序：

.ClientEvents(events => events.OnLoad("BindOnChange"))


function BindOnChange(e){
  // this - IdRequest
  $(this).change(OnRadio_Change);
}

function OnRadio_Change(e){
  var $radio = $(e.target);
  alert($radion.is(':checked'));
  // var $tr = $(this).closest('tr');
}

Answer 3

使用了这个jquery代码 -

      <script type="text/javascript">


    $(document).ready(function () {

        //visuals
        $(function () {
            $("#approveRequest").button();
            $(".radioStyle").buttonset();


        });


        $('.label-class').click(LabelClicked);


        function LabelClicked() {


            var input = $('#' + $(this).attr('for'));
            if (input) {
                var selected = input.val();
                InputChanged(selected);
            }
            return true;
        }


        function InputChanged(selected) {

            var val = (selected.toString().split('_'))[0];
            var detailsId = (selected.toString().split('_'))[1];
            var approval = false;

            if (val == "yesApprove")
                approval = true;

            var count = $("#Count").val();

            for (var i = 0; i < count; i++) {
                if ($("#hiddenRequestDetailsId" + i).val() == detailsId) {

                    $("#hiddenApproved" + i).val(approval);
                }
            }

        }



        //              $('#IdRequest :radio[group=Approval]').each(function () {

        //                  alert(this.name);
        //                  $(this).change(function () { alert("aa"); });

        //             
        //              });



        //client side validation
        $.validator.setDefaults({
            highlight: function (input) {
                $(input).addClass("ui-state-highlight");
            },
            unhighlight: function (input) {
                $(input).removeClass("ui-state-highlight");
            }
        });


        $("#requestForm").validate({
            submitHandler: function (form) {

                $('form input[type=submit]').attr('disabled', 'true').addClass('ui-state-disabled');
                form.submit();
            }

        });


    });
</script>

如何将jquery change事件添加到网格内的单选按钮

3 个答案: