如何在 ajax html 编辑器中添加 html 复选框答案

【问题标题】：How to add html checkbox in ajax html editor如何在 ajax html 编辑器中添加 html 复选框
【发布时间】：2016-08-09 09:49:47
【问题描述】：

我尝试在 ASP.NET 的 Ajax HTML 编辑器中添加一个 HTML 复选框，但我无法选中和取消选中它。这是我尝试过的代码。请给点建议。

webform.aspx

 <%@ Register Assembly="AjaxControlToolkit"     
    Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="cc3" %>
<cc3:Editor ID="uwNotes" runat="server" Width="800px" Height="800px">           
</cc3:Editor>

webform.aspx.cs

decodedtext="";

 decodedtext = decodedtext.Append("<p><b>PLEP: </b><input type=\"CheckBox\"                     
 id=\"checkbox1\" enabled=\"true\">YES</p>");

 uwNotes.Content = decodedtext;

【问题讨论】：

如果您将复选框插入到编辑器中，那么编辑器的目的肯定是编辑内容（包括复选框），不与它互动？所以我不希望能够在这种情况下选中/取消选中它。一旦显示输入编辑器的内容（可能在其他页面上），那么它应该是可检查的。除非我误会了。
但是我收到了客户的要求，要求在 Web 表单中的 ajax html 编辑器中添加 html 复选框。但在预览模式下，我可以选中/取消选中它。
复选框的用途是什么？它是编辑器功能的一部分，还是正在编辑的页面内容的一部分？
它是正在编辑的页面的内容。用户需要在设计模式下勾选/取消勾选。

标签： html asp.net ajax

【解决方案1】：

您可以使用流动语法添加复选框

<input type=\"checkbox\" value=\"Y\"  style=\"height:auto\" ">

【讨论】：

我试过这段代码。但它不起作用。你能建议一些其他的解决方案吗？
我已经添加了另一个答案，请参阅
其实，连续点击 3 次后，跨度>
我已经给出了另一个答案也看到它兄弟
使用 sn-p 运行 sn-p ，如果不是您需要的答案，请显示您遇到问题的地方

【解决方案2】：

var editor;  // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
    "ajax": "../File Path",
    "table": "#example",
    "fields": [ {
            label:     "Active:",
            name:      "active",
            type:      "checkbox",
         options:   [ { label: '', value: 1 }]
             ]} );

【讨论】：

放一个函数渲染：

【解决方案3】：

function(render){
  render :<input type=\"checkbox\" value=\"Y\">
 }

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！
实际上这段代码在谷歌浏览器中运行良好而不是在 IE 中。在 IE 中连续单击 3 次后在设计模式下选中复选框。

【解决方案4】：

        var response = { optionA: 'One', optionB: 'Two', optionC: 'Three' };

               // this would go in your ajax success handler
                   $.each(response, function (key, value) {var li = $('<li><input type="checkbox" name="' + key + '" id="' +         key + '"/>' +
                 '<label for="' + key + '"></label></li>');
                 li.find('label').text(value);
                    $('#wkslist').append(li);
                       });

#wkslist {
    list-style-type: none;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wkslist"></ul>

               #wkslist {
       list-style-type: none;
             padding: 0;
                  }

             <script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
           </script>
           <ul id="wkslist"></ul>

【讨论】：

在你的 sn-p 中运行它
这是你需要的sn-p

【解决方案5】：

这是您问题的一个示例：

var response = { optionA: 'One', optionB: 'Two', optionC: 'Three' };
$('#json').val('response[i]');
$("button").click(function(){  
$('<p><input type="checkbox"/><span>Response Text</span></p>').insertAfter("li");  
    });

#wkslist {
    list-style-type: none;
    padding: 0;
}
.respons{
  width:200px;
  height:100px;
  overflow-y:auto;
  border:1px solid #600;
  color:green;
}
button{margin-top:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="respons">
<ul id="wkslist">
<li></li>
</ul>
</div>
<button id="res">Response</button>

【讨论】：