asp:CheckBoxList 呈现为 span 并且没有复选框（FF 和 webkit）

Question

我正在使用 asp.net 的 CheckboxList 控件。它在过去按预期工作正常，但肯定它开始无法在 chrome 和 firefox 浏览器中正确呈现。它在 Internet Explorer 中完美呈现（在我的例子中是 9）。

它在 span 标签中呈现如下

<div class="clearfix">
  <span id="cntMain_chkColumns">Activity IDActivity TItleSubmitted ByActivity DateRequest DateAmountStatusExternal Activity IDCustomer ID</span>
</div>

虽然正确和预期的渲染（来自 IE）如下

<span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_0" class="ez-hide" name="ctl00$cntMain$chkColumns[=12=]" value="0" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_0">Activity ID</label></span>
<span
class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
  <div class="ez-checkbox ez-checked">
    <input id="cntMain_chkColumns_1" class="ez-hide" name="ctl00$cntMain$chkColumns" value="1" CHECKED="checked" type="checkbox">
  </div>
  <label for="cntMain_chkColumns_1">Activity TItle</label>
  </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_2" class="ez-hide" name="ctl00$cntMain$chkColumns" value="2" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_2">Submitted By</label></span>
  <span
  class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
    <div class="ez-checkbox ez-checked">
      <input id="cntMain_chkColumns_3" class="ez-hide" name="ctl00$cntMain$chkColumns" value="3" CHECKED="checked" type="checkbox">
    </div>
    <label for="cntMain_chkColumns_3">Activity Date</label>
    </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_4" class="ez-hide" name="ctl00$cntMain$chkColumns" value="4" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_4">Request Date</label></span>
    <br><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_5" class="ez-hide" name="ctl00$cntMain$chkColumns" value="5" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_5">Amount</label></span>
    <span
    class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
      <div class="ez-checkbox ez-checked">
        <input id="cntMain_chkColumns_6" class="ez-hide" name="ctl00$cntMain$chkColumns" value="6" CHECKED="checked" type="checkbox">
      </div>
      <label for="cntMain_chkColumns_6">Status</label>
      </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_7" class="ez-hide" name="ctl00$cntMain$chkColumns" value="7" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_7">External Activity ID</label></span>
      <span
      class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
        <div class="ez-checkbox ez-checked">
          <input id="cntMain_chkColumns_8" class="ez-hide" name="ctl00$cntMain$chkColumns" value="8" CHECKED="checked" type="checkbox">
        </div>
        <label for="cntMain_chkColumns_8">Customer ID</label>
        </span>
        <br>

**CSS** 以下是 css 规则，如果复选框呈现则应该应用这些规则 :(

.defaultP - is a dummy class for calling ezMark plugin.
.drag-box-wp{ border:1px dashed #cccccc; padding:7px; display:inline; float:left; width:100%; margin:0 0 20px 20px; background:#ffffff; max-width: 195px; }

剩余的类用于 jquery-ui-可拖动交互小部件。

下面是我的标记

<asp:CheckBoxList ID="chkColumns" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" RepeatLayout="Flow"></asp:CheckBoxList>

我在单击按钮时绑定此复选框列表，C# 代码隐藏文件中的绑定代码如下所示

 DataView dvCustomizableColumns = dtCustomizableColumns.DefaultView;
 dvCustomizableColumns.Sort = "Sequence_ID ASC";
 chkColumns.DataSource = dvCustomizableColumns;
 chkColumns.DataTextField = "ColumnDisplayName";
 chkColumns.DataValueField = "Sequence_ID";
 chkColumns.DataBind();

稍后使用一个函数，我使这些复选框可拖动，并使用 ezMark Plugin 在复选框上应用一些样式。

代码：

    private void EnableDraggingOnItems(DataView dvCustomizableColumns)
    {
       for (int i = 0; i < dvCustomizableColumns.Table.Rows.Count; i++)
        {
         if (hdnSelectedColumns.Value != string.Empty)
          {
           if (hdnSelectedColumns.Value.Contains(chkColumns.Items[i].Value))
            {
              chkColumns.Items[i].Selected = true;
            }
          }
         else
          {
            chkColumns.Items[i].Selected = true;
          }


chkColumns.Items[i].Attributes.Add("class", "defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop");
        }
    }

我还检查了 chrome 是否有一个复选框 webkit 样式设置为 none 但它在 css.

中没有

如果需要更多信息，请告诉我。

Answer 1

感谢所有对我的问题表现出兴趣的人。幸运的是，我找到了解决问题的办法。事实证明，在我的母版页中，有一个 jquery 以选择器开头，导致复选框列表的 innerHtml 被更改。

$("span[id^='cntMain']").each(function () {
                $(this).text($(this).text().toString().toTitleCase());
            });

这就是它只呈现标签的原因。我在上面的代码中更改了选择器，如下所示

 $("span[id^='cntMain']:not(:has(*))").each(function () {
                $(this).text($(this).text().toString().toTitleCase());
            });

虽然这是一个非常具体的问题，但我发布了答案以防有人仍然觉得它有用。

我仍然想知道为什么以及如何在 IE 中工作。

asp:CheckBoxList 呈现为 span 并且没有复选框（FF 和 webkit）

asp:CheckBoxList renders as span and no checkboxes(FF and webkit)

asp.net

firefox

google-chrome

checkboxlist

html-rendering