JQuery - 剣道タブストリップ内の最初のグリッドの値を取得するセレクタ

Question

5つのグリッドがすべて別の剣道タブストリップに配置されています。私が達成しようとしているのは、更新するときに、少なくとも1つのチェックボックスをチェックするようにユーザーに警告する必要があるということです。しかし、私のセレクタは、編集をクリックすると最初のグリッドのチェックボックスしか表示されないようです。他のものには何も起こりません。ここで

は、ここに私のグリッド -

<div id="tabstrip-left-A"> 
    <ul> 
     <li class="k-state-active"> 
      Diagnostic 
     </li> 
     <li> 
      Referrals 
     </li> 

    </ul> 
    <div> 
<div id="tabstrip-left-B"> 
      <ul> 
       <li class="k-state-active"> 
        SubTypes 
       </li> 
       <li> 
        Categories 
       </li> 
       <li> 
        Statuses 
       </li> 


      </ul> 
      <div> 


       @*Diagnostic*@ 
       @(Html.Kendo().Grid<OSH.Domain.Models.TPSWork.ExcludeFrom>() 
     .Name("DiagnosticGrid") 
     .Columns(columns => 
     { 
      columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(180); 
      columns.Bound(e => e.TPSDiagExclusionID).Width(150).Hidden(); 

      columns.ForeignKey(p => p.OrdConceptID, (System.Collections.IEnumerable)ViewData["OrdConceptShortNameID"], "OrdConceptID", "OrdConceptShortName").Title("Order Concept").EditorTemplateName("OrdConceptID"); 

      columns.Bound(e => e.ExcludeFromReportlist).Width(200); 
      columns.Bound(e => e.ExcludeFromWorklist).Width(200); 
     }) 
     .ToolBar(toolbar => { toolbar.Create().Text("Add New Diagnostic Code"); }) 

     .Editable(editable => editable.Mode(GridEditMode.InLine)) 
     .Sortable() 
     .Pageable() 
     .Scrollable() 
     .ColumnMenu() 
     .Filterable() 
     .HtmlAttributes(new { style = "height:520px;" }) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(10) 
      .Model(model => 
      { 
       model.Id(p => p.TPSDiagExclusionID); 
      }) 
        .Read(read => read.Action("ReadDiagnosticCode", "TPSAdmin").Data("FilterOrdConcept")) 
        .Create(update => update.Action("CreateDiagnosticCode", "TPSAdmin").Data("InsertAdditionalData")) 
        .Update(update => update.Action("UpdateDiagnosticCode", "TPSAdmin").Data("AdditionData")) 
        .Destroy(update => update.Action("DeleteDiagnosticCode", "TPSAdmin")) 
        .Events(events => events.Error("onError").Sync("sync_handler")) 
        ) 
       .Pageable(x => x.PageSizes(new List<object> { 5, 10, 15, 20, "all" }).Refresh(true)) 
       .Events(e => e.Edit("onDiagnosticGridEdit")) 
       .Filterable(ftb => ftb 
      .Extra(false) 
      .Operators(operators => operators 
      .ForString(str => str.Clear() 
       .Contains("Contains") 
       .IsEqualTo("Is equal to") 
       .IsNotEqualTo("Is not equal to") 
      )) 
      ) 
    .Sortable() 
    .Groupable() 
    .Resizable(resize => resize.Columns(true)) 
    .Reorderable(reorder => reorder.Columns(true)) 
       ) 
      </div> 
      <div> 
       @*Categories*@ 
       @(Html.Kendo().Grid<OSH.Domain.Models.TPSWork.ExcludeFromDiagCategories>() 
     .Name("DiagCategoriesGrid") 
     .Columns(columns => 
     { 
      columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(180); 
      columns.Bound(e => e.ID).Width(150).Hidden(); 
      columns.ForeignKey(p => p.OrdCategoryID, (System.Collections.IEnumerable)ViewData["DiagCategDescID"], "OrdCategoryID", "OrdCategoryDesc").Title("Category").EditorTemplateName("OrdDiagCategID"); 

      columns.Bound(e => e.ExcludeFromReportList).Width(200); 
      columns.Bound(e => e.ExcludeFromWorkList).Width(200); 
     }) 
     .ToolBar(toolbar => { toolbar.Create().Text("Add New Category"); }) 

     .Editable(editable => editable.Mode(GridEditMode.InLine)) 
     .Sortable() 
     .Pageable() 

     .Scrollable() 
     .ColumnMenu() 
     .Filterable() 
     .HtmlAttributes(new { style = "height:520px;" }) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(10) 
      .Model(model => 
      { 
       model.Id(p => p.OrdCategoryID); 
      }) 
        .Read(read => read.Action("ReadDiagCategories", "TPSAdmin").Data("FilterDiagCategories")) 
        .Create(update => update.Action("CreateDiagCategories", "TPSAdmin").Data("InsertDiagCategData")) 
        .Update(update => update.Action("UpdateDiagCategories", "TPSAdmin").Data("AdditionData")) 
        .Destroy(update => update.Action("DeleteDiagCategories", "TPSAdmin")) 
        .Events(events => events.Error("onError").Sync("sync_handler")) 
        ) 
       .Pageable(x => x.PageSizes(new List<object> { 5, 10, 15, 20, "all" }).Refresh(true)) 
       .Events(e => e.Edit("onDiagCategGridEdit")) 
       .Filterable(ftb => ftb 
      .Extra(false) 
      .Operators(operators => operators 
      .ForString(str => str.Clear() 
       .Contains("Contains") 
       .IsEqualTo("Is equal to") 
       .IsNotEqualTo("Is not equal to") 
      )) 
      ) 
    .Sortable() 
    .Groupable() 
    .Resizable(resize => resize.Columns(true)) 
    .Reorderable(reorder => reorder.Columns(true)) 
       ) 
      </div> 
      <div> 
       @*Statuses*@ 
      @(Html.Kendo().Grid<OSH.Domain.Models.TPSWork.ExcludeFromDiagStatuses>() 
     .Name("DiagStatusesGrid") 
     .Columns(columns => 
     { 
      columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(180); 
      columns.Bound(e => e.ID).Width(150).Hidden(); 

      columns.ForeignKey(p => p.StatusID, (System.Collections.IEnumerable)ViewData["StatusNameID"], "StatusID", "StatusName").Title("Status Name").EditorTemplateName("DiagStatusExclusionEdit"); 

      columns.Bound(e => e.ExcludeFromReportList).Width(200); 
      columns.Bound(e => e.ExcludeFromWorkList).Width(200); 
     }) 
     .ToolBar(toolbar => { toolbar.Create().Text("Add New Status Type"); }) 

     .Editable(editable => editable.Mode(GridEditMode.InLine)) 
     .Sortable() 
     .Pageable() 
     .Scrollable() 
     .ColumnMenu() 
     .Filterable() 
     .HtmlAttributes(new { style = "height:520px;" }) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(10) 
      .Model(model => 
      { 
       model.Id(p => p.ID); 
      }) 
        .Read(read => read.Action("ReadDiagStatuses", "TPSAdmin").Data("FilterDiagStatuses")) 
        .Create(update => update.Action("CreateDiagStatus", "TPSAdmin").Data("InsertDiagStatusData")) 
        .Update(update => update.Action("UpdateDiagStatus", "TPSAdmin").Data("AdditionData")) 
        .Destroy(update => update.Action("DeleteDiagStatus", "TPSAdmin")) 
        .Events(events => events.Error("onError").Sync("sync_handler")) 
        ) 
       .Pageable(x => x.PageSizes(new List<object> { 5, 10, 15, 20, "all" }).Refresh(true)) 
       .Events(e => e.Edit("onDiagnosticStatusEdit")) 
       .Filterable(ftb => ftb 
      .Extra(false) 
      .Operators(operators => operators 
      .ForString(str => str.Clear() 
       .Contains("Contains") 
       .IsEqualTo("Is equal to") 
       .IsNotEqualTo("Is not equal to") 
      )) 
      ) 
    .Sortable() 
    .Groupable() 
    .Resizable(resize => resize.Columns(true)) 
    .Reorderable(reorder => reorder.Columns(true)) 
      ) 
     </div> 
    </div> 

の最初のタブである私のAdditionData機能である -

function AdditionData() { 

     var grid = $("table[role='grid'").data("kendoGrid"); 
     var reportList = $("table[role='grid'] input[name='ExcludeFromReportlist'][type='hidden']").val(); 
     var workkList = $("table[role='grid'] input[name='ExcludeFromWorklist'][type='hidden']").val(); 

     if (reportList == "false" && workkList == "false") { 

      alert("One checkbox must be checked.") 
      return; 
     } 

     else { 
      return { 
       OrdConceptIDData: $("#OrdConceptID").val(), 
       OrdCategoryIDData: $("#OrdDiagCategID").val(), 
       DiagStatusID: $('#StatusID').val(), 
       RefAuthTypeID: $("#ReferralAuthorizationTypeID").val(), 
       RefStatusIDData: $("#ReferralAuthorizationStatusID").val(), 
       RefSubTypeIDData: $("#SpecialtyID").val() 
      } 
     } 
    } 

私は「更新」をクリックすると、これが唯一の私の最初のグリッドのチェックボックスの値を示します。しかし、他のタブでは何も起こりません。これは私が立ち往生している部分です。

ありがとうございます！あなたが実際には最初のグリッドを取得しているためである

Answer 1

：

var grid = $("table[role='grid'").data("kendoGrid"); 

上記のコード - タイプミス以外に - あなたのセレクタが以上に一致しても、最初のグリッドを返します。 1つの要素。チェックボックスがチェックされているかどうかをチェックするためにis()を使用し、また

function AdditionData() { 
    var checkBoxes = true; 

    $("table[role='grid']").each(function() { 
     var subCheckBoxes = false, 
      grid = $(this).closest(".k-grid"); // Get the real grid wrapper element 

     $("input[name='ExcludeFromReportlist'][type='hidden'], input[name='ExcludeFromWorklist'][type='hidden']", grid).each(function() {    
      if (!$(this).is(":checked")) { 
       // If ANY checkbox is checked, then it is valid. 
       subCheckBoxes = true; 
       return false; // Exits loop 
      } 
     }); 

     // If ANY grid has no checkboxes checked, then it is invalid. 
     if (!subCheckBoxes) { 
      checkBoxes = false; 
      return false; // Exits loop 
     } 
    }); 

    if (!checkBoxes) { 
     alert("One checkbox must be checked.") 
     return; 
    } 
    else { 
     return { 
      OrdConceptIDData: $("#OrdConceptID").val(), 
      OrdCategoryIDData: $("#OrdDiagCategID").val(), 
      DiagStatusID: $('#StatusID').val(), 
      RefAuthTypeID: $("#ReferralAuthorizationTypeID").val(), 
      RefStatusIDData: $("#ReferralAuthorizationStatusID").val(), 
      RefSubTypeIDData: $("#SpecialtyID").val() 
     } 
    } 
} 

Demo

：

は、ループを試してみてください。 Source。