如何将HTML元素放入ASP复选框内的标签中? [英] How to put html element into the label within asp checkbox?
问题描述
基本上我需要渲染的是:
Basically what I need to get rendered is this:
<input id="MainContent_PageContent_SettingsPage_RFID Info" type="checkbox" name="ctl00$ctl00$MainContent$PageContent$SettingsPage$RFID Info" checked="checked">
<label for="MainContent_PageContent_SettingsPage_RFID Info">
<i class="fa fa-check" aria-hidden="true"></i>
</label>
同时System.Web.UI.WebControls.CheckBox仅给我这样的信息:
meanwhile System.Web.UI.WebControls.CheckBox gives me only this:
<input id="MainContent_PageContent_SettingsPage_RFID Info" type="checkbox" name="ctl00$ctl00$MainContent$PageContent$SettingsPage$RFID Info" checked="checked">
<label for="MainContent_PageContent_SettingsPage_RFID Info">
RFID Info
</label>
推荐答案
虽然您不必对ASP.NET如何呈现CheckBox拥有太多控制权，但您有两个解决方案可供考虑这个.
While you aren't going to necessarily have much control with regards to how ASP.NET is going to render your CheckBox, you have two options to consider for resolving this.
考虑不使用复选框控件
如果这是一个选项，则可能要考虑使用装饰有 runat ="server" 属性的普通< input> 元素(因此可以通过后台代码访问)，而不是通过CheckBox控件访问.这样就可以为您提供更多的灵活性，因为您不必担心默认生成的代码:
If it is an option, you might want to consider using a plain <input> element decorated with the runat="server" attribute (so it can be accessed via the code-behind) instead of a CheckBox Control. This should give you more flexibility with how it is appears as you won't have to worry about the default generated code :
<!-- This should allow you to still access RFIDInfo in your code-behind -->
<input id="RFID_Info" runat="server" type="checkbox" checked="checked">
<i class="fa fa-check" aria-hidden="true"></i>
使用Java脚本或jQuery替换HTML内容
如果要使用CheckBox控件，另一种选择是考虑通过Javascript或jQuery执行客户端替换以定位适当的标签并替换内容:
Another option, if you wanted to use the CheckBox Control would be to consider performing a client-side replacement via Javascript or jQuery to target the appropriate label and replace the contents :
// Pure Javascript approach
document.querySelector('[for$="RFID Info"]').innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>'
// jQuery approach
$(function(){
// Replace the contents of your label with your Font Awesome icon
$('label[for$="RFID Info"]').html('<i class="fa fa-check" aria-hidden="true"></i>');
});
示例
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Label Replacement</title>
</head>
<body>
<input id="MainContent_PageContent_SettingsPage_RFID Info" type="checkbox" name="ctl00$ctl00$MainContent$PageContent$SettingsPage$RFID Info" checked="checked">
<label for="MainContent_PageContent_SettingsPage_RFID Info">
RFID Info
</label>
<script>
document.querySelector('[for$="RFID Info"]').innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>'
</script>
</body>
</html>这篇关于如何将HTML元素放入ASP复选框内的标签中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
