skip to Main Content

Direct answer to this question would be to answer "How do I make my disabled checkbox look like it is NOT disabled?"

I have been attempting to style a disabled checkbox however I have been unsuccessful. There are many posts saying it can be done and I’ve pasted below two of them.

How to style a disabled checkbox?

How to style a checkbox using CSS

The main points I took out of these answers is I am needing to locate the disabled element using CSS selectors similar to the css shown in the code snippet.

No matter what I do I am not able to change the look/appearance of any disabled checkbox. Is this possible? Any style I apply works for enabled checkboxes using the information stated in the 2nd SO Post I provided.

Simple HTML

input[disabled] {
  accent-color: red;
}

input:disabled {
  accent-color: red;
}
<input type="checkbox" checked onclick="showOccur(event)" ;/>
<input type="checkbox" checked onclick="showOccur(event)" ; disabled/>

Screenshot of Checkboxes using default Chrome browser styles

Simple HTML with checkboxes

Per request: Stripped down non minimal html of disabled checkboxes in a table

<html lang="en" style="--backdrop-filter:blur(1px); width: 100%; height: 100%;" data-default-button="NONE"><head><script async="" src="https://www.google-analytics.com/analytics.js"></script><script language="javascript" type="text/javascript">(window.Promise || document.write('<script language="javascript" type="text/javascript" src="/Content/promise/es6-promise.min.js"><'+'/script>'));</script>
    
    
    <div class="FormPages has-v-scrollbar" style="height: 684px;">
    <div id="Renderer_Page1_body" class="Page card" pageindex="0">
        <div class="Body card-body">
        <h2 class="PageHeader"><a class="Title card-title" id="RendererPage1" name="RendererPage1" role="heading">Form Page - Alter Disabled Checkboxes CSS</a>
        </h2>
            <div class="Description" role="note" style="display: none;"></div>
            <div id="Renderer_Page1" class="FormContainer" rendererid="Renderer" helptext="NONE">
            <div class="FormButtons top"></div>
            <table class="FormPage" align="center" role="presentation">
            <colgroup><col style="width:35%"><col><col></colgroup>
            <tbody>
                <tr>
                    <td id="Label1000023099_Renderer" dm="CT_ReferralsEducation_AssessmentID" style="text-align: center; display: none" colspan="3" nosiblings="true"><nobr><label for="1000023099_Renderer" id="LBL1000023099_Renderer">Assessment</label>:</nobr><br>
                    <input type="hidden" id="1000023099_Renderer" name="1000023099_Renderer" value="309" class="form-control"><div style="display: none;">No Assessment Selected</div><table aria-label="Master Assessment ID: 309" cellpadding="2" cellspacing="0" class="PluginTable"><thead><tr><th>Date</th><th style="display: none;">Program</th><th>Type</th><th>User</th></tr></thead><tbody><tr><td id="1000023099_Renderer_Date">3/14/2023</td><td id="1000023099_Renderer_Program" style="display: none;"></td><td id="1000023099_Renderer_Type">Initial (Entry)</td><td id="1000023099_Renderer_User">Stuart Black</td></tr></tbody></table></td>
                </tr>
                <tr>
                    <td id="Label1000023100_Renderer" dm="CT_ReferralsEducation_AssessmentDate" class="LabelStyle"><label for="1000023100_Renderer" id="LBL1000023100_Renderer">Assessment Date</label>:</td><td class="RequiredStyle">&nbsp;</td>
                    <td class="FieldStyle"><span id="1000023100_Renderer_Display" class="form-control-static">3/14/2023</span><input type="hidden" id="1000023100_Renderer" value="3/14/2023 12:00:00 AM" data-ros="true" data-format="d" class="form-control"></td>
                </tr>
            </tbody>
            </table>
            <div id="Label1000023121_Renderer" dm="ReferralsSectionHeader" class="SectionHeadingStyle" nosiblings="true"><div><label>Referrals</label><div class="section-content" id="content_1000023121_Renderer">For each referral, check whether it was written referral or verbal referral</div></div></div>
            <div id="Label1000023158_Renderer" dm="SubRendererReferralsProvided" nosiblings="true"><div id="SFCRendererSF1" class="SubFormContainer">
            <div class="seperator"></div><div id="RendererSF1_Page1" class="FormContainer" rendererid="RendererSF1" helptext="NONE" pageindex="0">
            <div class="FormButtons top"></div>

    <div rendererid="RendererSF1" editelement="1000023153_RendererSF1" class="ResultContainer" helptext="NONE" height="FILL" spreadsheet="true" style="">

        <table cellpadding="0" cellspacing="0" class="ResultSet table Spreadsheet table-hover hide-cbx" aria-readonly="true" id="RendererSF1ResultSet" role="grid" data-align="left">
            <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col style="text-align: center">
            </colgroup>
            <thead>
                <tr onselectstart="CancelEvent(event);" ondragstart="CancelEvent(event);">
                    <th class="icons" scope="col"><span class="sr">Buttons and actions</span><input type="checkbox" class="form-checkbox" id="CheckAllRendererSF1" disabled="disabled" onclick="CheckAll(event);">
                        <label for="CheckAllRendererSF1" class="sr">Check all rows in the grid</label>
                    </th>
                        
                    <th datacolumn="CT_ReferralsProvided.ReferralsProvidedID" data-eid="1000023153_RendererSF1" style="text-align:right;display:none" data-group-ordinal="0" id="1000023153_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="-desc col-sort col-sort-desc" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Hidden - Referrals Provided ID</a></th>
                    <th datacolumn="Code.CodeID" data-eid="1000023162_RendererSF1" style="text-align:right;display:none" data-group-ordinal="0" id="1000023162_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="-asc col-sort col-sort-asc col-sort-primary" aria-label="Click to sort in descending order" data-rsti="0" tabindex="-1">Hidden - Code ID (Do Not Remove Or Form will Break)<span class="RequiredStyle">*</span></a></th>
                    <th datacolumn="Code.Description" data-eid="1000023161_RendererSF1" data-group-ordinal="0" id="1000023161_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Referrals Provided</a></th>
                    <th datacolumn="CT_ReferralsProvided.WrittenHandOut" data-eid="1000023155_RendererSF1" style="text-align:left" data-group-ordinal="0" id="1000023155_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Written Hand Out</a></th>
                    <th datacolumn="CT_ReferralsProvided.Verbal" data-eid="1000023156_RendererSF1" style="text-align:left" data-group-ordinal="0" id="1000023156_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Verbal</a></th>
                    <th datacolumn="DetectOther" data-eid="1000023173_RendererSF1" style="display:none" data-group-ordinal="0" id="1000023173_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" aria-disabled="true" tabindex="-1" class="">CT_ReferralsProvided.DetectOther</a></th>
                    <th scope="col"><span class="sr">Undo changes</span></th>
                </tr>
            </thead>
        
            <tbody data-help="NONE" aria-readonly="true">
                <tr key="15" aria-posinset="5" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF115" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF115" id="SAVERendererSF115" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF115" name="1000023153_RendererSF115" value="15" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF115" name="1000023162_RendererSF115" value="1000000033" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF115_Display" class="form-control-static">Medicaid</span><input type="hidden" id="1000023161_RendererSF115" value="Medicaid" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF115" name="1000023155_RendererSF115" disabled="" value="Y" data-key="15" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF115" name="1000023156_RendererSF115" disabled="" value="Y" data-key="15" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF115_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF115" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF115"><button id="UNDORendererSF115" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
                <tr key="26" aria-posinset="6" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF126" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF126" id="SAVERendererSF126" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF126" name="1000023153_RendererSF126" value="26" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF126" name="1000023162_RendererSF126" value="1000000044" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF126_Display" class="form-control-static">Health Care Services</span><input type="hidden" id="1000023161_RendererSF126" value="Health Care Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF126" name="1000023155_RendererSF126" checked="Checked" disabled="" value="Y" data-key="26" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF126" name="1000023156_RendererSF126" disabled="" value="Y" data-key="26" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF126_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF126" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF126"><button id="UNDORendererSF126" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
                <tr key="28" aria-posinset="7" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF128" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF128" id="SAVERendererSF128" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF128" name="1000023153_RendererSF128" value="28" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF128" name="1000023162_RendererSF128" value="1000000046" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF128_Display" class="form-control-static">Maternal Health Services</span><input type="hidden" id="1000023161_RendererSF128" value="Maternal Health Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF128" name="1000023155_RendererSF128" disabled="" value="Y" data-key="28" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF128" name="1000023156_RendererSF128" disabled="" value="Y" data-key="28" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF128_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF128" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF128"><button id="UNDORendererSF128" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
                <tr key="29" aria-posinset="8" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF129" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF129" id="SAVERendererSF129" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF129" name="1000023153_RendererSF129" value="29" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF129" name="1000023162_RendererSF129" value="1000000047" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF129_Display" class="form-control-static">Legal Services</span><input type="hidden" id="1000023161_RendererSF129" value="Legal Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF129" name="1000023155_RendererSF129" checked="Checked" disabled="" value="Y" data-key="29" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF129" name="1000023156_RendererSF129" disabled="" value="Y" data-key="29" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF129_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF129" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF129"><button id="UNDORendererSF129" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
                <tr key="33" aria-posinset="12" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF133" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF133" id="SAVERendererSF133" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF133" name="1000023153_RendererSF133" value="33" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF133" name="1000023162_RendererSF133" value="1000000051" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF133_Display" class="form-control-static">STD Testing</span><input type="hidden" id="1000023161_RendererSF133" value="STD Testing" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF133" name="1000023155_RendererSF133" disabled="" value="Y" data-key="33" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF133" name="1000023156_RendererSF133" disabled="" value="Y" data-key="33" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF133_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF133" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF133"><button id="UNDORendererSF133" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
                <tr key="34" aria-posinset="13" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF134" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF134" id="SAVERendererSF134" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF134" name="1000023153_RendererSF134" value="34" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF134" name="1000023162_RendererSF134" value="1000000052" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF134_Display" class="form-control-static">STD Treatment</span><input type="hidden" id="1000023161_RendererSF134" value="STD Treatment" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF134" name="1000023155_RendererSF134" disabled="" value="Y" data-key="34" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF134" name="1000023156_RendererSF134" disabled="" value="Y" data-key="34" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF134_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF134" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF134"><button id="UNDORendererSF134" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td></tr>
                <tr key="16" aria-posinset="14" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                    <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF116" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF116" id="SAVERendererSF116" class="form-control"></td>
                    <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF116" name="1000023153_RendererSF116" value="16" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF116" name="1000023162_RendererSF116" value="1000000034" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF116_Display" class="form-control-static">HIV Treatment</span><input type="hidden" id="1000023161_RendererSF116" value="HIV Treatment" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF116" name="1000023155_RendererSF116" disabled="" value="Y" data-key="16" aria-labelledby="aria_1000023155_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF116" name="1000023156_RendererSF116" checked="Checked" disabled="" value="Y" data-key="16" aria-labelledby="aria_1000023156_RendererSF1"></td>
                    <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF116_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF116" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                    <td id="INFORendererSF116"><button id="UNDORendererSF116" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                </tr>

            </tbody>
        </table>
    </div>

</form>
    
</body>
</html>

Screenshot of non minimal version:

Checkboxes

4

Answers


  1. It’s rather hacky. To get results you d better hide the default layout and redesign your own.

    Like here: https://codepen.io/chriscoyier/pen/JjozJLv

    .switch-label::before,
    .switch-label::after {
      content: "";
      display: block;
      position: absolute;
      cursor: pointer;
    }
    .switch-label::before {
      width: 100%;
      height: 100%;
      background-color: #dedede;
      border-radius: 9999em;
      -webkit-transition: background-color 0.25s ease;
      transition: background-color 0.25s ease;
    }
    .switch-label::after {
      top: 0;
      left: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
      -webkit-transition: left 0.25s ease;
      transition: left 0.25s ease;
    }
    .switch-input:checked + .switch-label::before {
      background-color: #89c12d;
    }
    .switch-input:checked + .switch-label::after {
      left: 24px;
    }
    
    
    
    
    body {
      text-align: center;
      padding: 2rem;
    }
    
    
    
    accent-color does not have any effect of disabled input[type=checkbox]
    
    Login or Signup to reply.
  2. Initial code source :: // Learn about this technique:
    // @link https://moderncss.dev/pure-css-custom-checkbox-style/

    HTML

    <form action="">
      <label class="form-control">
        <input type="checkbox" name="checkbox" />
        Checkbox
      </label>
    
      <label class="form-control">
        <input class="dbl" type="checkbox" name="checkbox-checked" checked />
        Checkbox - checked
      </label>
    
      <label class="form-control form-control--disabled">
        <input type="checkbox" name="checkbox-disabled" disabled />
        Checkbox Disabled
      </label>
    
      <label class="form-control form-control--disabled">
        <input class="dred" type="checkbox" name="checkbox-disabled-checked" checked disabled />
        Checkbox Disabled - checked
      </label>
    </form>
    

    CSS

          :root {
      --form-control-color: rebeccapurple;
      --form-control-disabled: #959495;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    form {
      display: grid;
      place-content: center;
      min-height: 100vh;
    }
    
    .form-control {
      font-family: system-ui, sans-serif;
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.1;
      display: grid;
      grid-template-columns: 1em auto;
      gap: 0.5em;
    }
    
    .form-control + .form-control {
      margin-top: 1em;
    }
    
    .form-control--disabled {
      color: var(--form-control-disabled);
      cursor: not-allowed;
    }
    
    input[type="checkbox"] {
      /* Add if not using autoprefixer */
      -webkit-appearance: none;
      /* Remove most all native input styles */
      appearance: none;
      /* For iOS < 15 */
      background-color: var(--form-background);
      /* Not removed via appearance */
      margin: 0;
    
      font: inherit;
      color: currentColor;
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid currentColor;
      border-radius: 0.15em;
      transform: translateY(-0.075em);
    
      display: grid;
      place-content: center;
    }
    
    .dbl::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      transform-origin: bottom left;
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em black;
      /* Windows High Contrast Mode */
      background-color: CanvasText;
    }
    
    .dred::before
    {
      content: "";
      width: 0.65em;
      height: 0.65em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      transform-origin: bottom left;
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em red;
      /* Windows High Contrast Mode */
      background-color: CanvasText;
    }
    
    input[type="checkbox"]:checked::before {
      transform: scale(1);
    }
    
    input[type="checkbox"]:focus {
      outline: max(2px, 0.15em) solid red;
      outline-offset: max(2px, 0.15em);
    }
    
    input[type="checkbox"]:disabled {
      --form-control-color: red;
      opacity: 0.5;
      color: red;
      cursor: not-allowed;
    }
    
    Login or Signup to reply.
  3. Here is an example on how you could make a disabled checkbox look normal with CSS.

    .disabled-checkbox {
       opacity: 0.5; /* Reduce the opacity of the checkbox */
       cursor: not-allowed; /* Change the cursor to indicate that the checkbox is disabled */
       pointer-events: none; /* Disable pointer events to prevent user interaction */
    
    Login or Signup to reply.
  4. As you can add JavaScript to the code which will be shown in the iFrame you can go through adding for example a label element associated with each disabled input, set the actual input to opacity 0 for example and instead show the label element, formatted as you want it.

    I do not know how you want it to look so this snippet just puts in a blue square.

    Obviously you’ll need to check that the code selects exactly all those inputs which are of interest.

    const disabledInputs = document.querySelectorAll('td > input[disabled]');
    disabledInputs.forEach(input => {
      const label = document.createElement('label');
      label.classList.add('specialinsert');
      input.parentElement.prepend(label);
    
    });
    td>label.specialinsert+input {
      opacity: 0;
    }
    
    td>label.specialinsert {
      background-color: blue;
      width: 10px;
      height: 10px;
      display: inline-block;
    }
    <html lang="en" style="--backdrop-filter:blur(1px); width: 100%; height: 100%;" data-default-button="NONE">
    
    <head>
      <script async="" src="https://www.google-analytics.com/analytics.js"></script>
      <script language="javascript" type="text/javascript">
        (window.Promise || document.write('<script language="javascript" type="text/javascript" src="/Content/promise/es6-promise.min.js"><' + '/script>'));
      </script>
    
      <div class="FormPages has-v-scrollbar" style="height: 684px;">
        <div id="Renderer_Page1_body" class="Page card" pageindex="0">
          <div class="Body card-body">
            <h2 class="PageHeader"><a class="Title card-title" id="RendererPage1" name="RendererPage1" role="heading">Form Page - Alter Disabled Checkboxes CSS</a>
            </h2>
            <div class="Description" role="note" style="display: none;"></div>
            <div id="Renderer_Page1" class="FormContainer" rendererid="Renderer" helptext="NONE">
              <div class="FormButtons top"></div>
              <table class="FormPage" align="center" role="presentation">
                <colgroup>
                  <col style="width:35%">
                  <col>
                  <col>
                </colgroup>
                <tbody>
                  <tr>
                    <td id="Label1000023099_Renderer" dm="CT_ReferralsEducation_AssessmentID" style="text-align: center; display: none" colspan="3" nosiblings="true">
                      <nobr><label for="1000023099_Renderer" id="LBL1000023099_Renderer">Assessment</label>:</nobr><br>
                      <input type="hidden" id="1000023099_Renderer" name="1000023099_Renderer" value="309" class="form-control">
                      <div style="display: none;">No Assessment Selected</div>
                      <table aria-label="Master Assessment ID: 309" cellpadding="2" cellspacing="0" class="PluginTable">
                        <thead>
                          <tr>
                            <th>Date</th>
                            <th style="display: none;">Program</th>
                            <th>Type</th>
                            <th>User</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td id="1000023099_Renderer_Date">3/14/2023</td>
                            <td id="1000023099_Renderer_Program" style="display: none;"></td>
                            <td id="1000023099_Renderer_Type">Initial (Entry)</td>
                            <td id="1000023099_Renderer_User">Stuart Black</td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td id="Label1000023100_Renderer" dm="CT_ReferralsEducation_AssessmentDate" class="LabelStyle"><label for="1000023100_Renderer" id="LBL1000023100_Renderer">Assessment Date</label>:</td>
                    <td class="RequiredStyle">&nbsp;</td>
                    <td class="FieldStyle"><span id="1000023100_Renderer_Display" class="form-control-static">3/14/2023</span><input type="hidden" id="1000023100_Renderer" value="3/14/2023 12:00:00 AM" data-ros="true" data-format="d" class="form-control"></td>
                  </tr>
                </tbody>
              </table>
              <div id="Label1000023121_Renderer" dm="ReferralsSectionHeader" class="SectionHeadingStyle" nosiblings="true">
                <div><label>Referrals</label>
                  <div class="section-content" id="content_1000023121_Renderer">For each referral, check whether it was written referral (pamphlet, sign, flyer, etc.) or verbal referral (simply telling)</div>
                </div>
              </div>
              <div id="Label1000023158_Renderer" dm="SubRendererReferralsProvided" nosiblings="true">
                <div id="SFCRendererSF1" class="SubFormContainer">
                  <div class="seperator"></div>
                  <div id="RendererSF1_Page1" class="FormContainer" rendererid="RendererSF1" helptext="NONE" pageindex="0">
                    <div class="FormButtons top"></div>
    
                    <div rendererid="RendererSF1" editelement="1000023153_RendererSF1" class="ResultContainer" helptext="NONE" height="FILL" spreadsheet="true" style="">
    
                      <table cellpadding="0" cellspacing="0" class="ResultSet table Spreadsheet table-hover hide-cbx" aria-readonly="true" id="RendererSF1ResultSet" role="grid" data-align="left">
                        <colgroup>
                          <col>
                          <col>
                          <col>
                          <col>
                          <col>
                          <col>
                          <col>
                          <col>
                          <col style="text-align: center">
                        </colgroup>
                        <thead>
                          <tr onselectstart="CancelEvent(event);" ondragstart="CancelEvent(event);">
                            <th class="icons" scope="col"><span class="sr">Buttons and actions</span><input type="checkbox" class="form-checkbox" id="CheckAllRendererSF1" disabled="disabled" onclick="CheckAll(event);">
                              <label for="CheckAllRendererSF1" class="sr">Check all rows in the grid</label>
                            </th>
    
                            <th datacolumn="CT_ReferralsProvided.ReferralsProvidedID" data-eid="1000023153_RendererSF1" style="text-align:right;display:none" data-group-ordinal="0" id="1000023153_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="-desc col-sort col-sort-desc" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Hidden - Referrals Provided ID</a></th>
                            <th datacolumn="Code.CodeID" data-eid="1000023162_RendererSF1" style="text-align:right;display:none" data-group-ordinal="0" id="1000023162_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="-asc col-sort col-sort-asc col-sort-primary" aria-label="Click to sort in descending order" data-rsti="0" tabindex="-1">Hidden - Code ID (Do Not Remove Or Form will Break)<span class="RequiredStyle">*</span></a></th>
                            <th datacolumn="Code.Description" data-eid="1000023161_RendererSF1" data-group-ordinal="0" id="1000023161_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Referrals Provided</a></th>
                            <th datacolumn="CT_ReferralsProvided.WrittenHandOut" data-eid="1000023155_RendererSF1" style="text-align:left" data-group-ordinal="0" id="1000023155_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Written Hand Out</a></th>
                            <th datacolumn="CT_ReferralsProvided.Verbal" data-eid="1000023156_RendererSF1" style="text-align:left" data-group-ordinal="0" id="1000023156_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" class="col-sort" aria-label="Click to sort in ascending order" data-rsti="0" tabindex="-1">Verbal</a></th>
                            <th datacolumn="DetectOther" data-eid="1000023173_RendererSF1" style="display:none" data-group-ordinal="0" id="1000023173_RendererSF1HEAD" scope="col"><a href="javascript:void(0);" aria-disabled="true" tabindex="-1" class="">CT_ReferralsProvided.DetectOther</a></th>
                            <th scope="col"><span class="sr">Undo changes</span></th>
                          </tr>
                        </thead>
    
                        <tbody data-help="NONE" aria-readonly="true">
                          <tr key="15" aria-posinset="5" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF115" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF115" id="SAVERendererSF115" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF115" name="1000023153_RendererSF115" value="15" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF115" name="1000023162_RendererSF115" value="1000000033" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF115_Display" class="form-control-static">Medicaid</span><input type="hidden" id="1000023161_RendererSF115" value="Medicaid" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF115" name="1000023155_RendererSF115" disabled="" value="Y" data-key="15" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF115" name="1000023156_RendererSF115" disabled="" value="Y" data-key="15" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF115_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF115" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF115"><button id="UNDORendererSF115" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
                          <tr key="26" aria-posinset="6" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF126" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF126" id="SAVERendererSF126" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF126" name="1000023153_RendererSF126" value="26" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF126" name="1000023162_RendererSF126" value="1000000044" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF126_Display" class="form-control-static">Health Care Services</span><input type="hidden" id="1000023161_RendererSF126" value="Health Care Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF126" name="1000023155_RendererSF126" checked="Checked" disabled="" value="Y" data-key="26" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF126" name="1000023156_RendererSF126" disabled="" value="Y" data-key="26" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF126_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF126" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF126"><button id="UNDORendererSF126" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
                          <tr key="28" aria-posinset="7" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF128" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF128" id="SAVERendererSF128" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF128" name="1000023153_RendererSF128" value="28" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF128" name="1000023162_RendererSF128" value="1000000046" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF128_Display" class="form-control-static">Maternal Health Services</span><input type="hidden" id="1000023161_RendererSF128" value="Maternal Health Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF128" name="1000023155_RendererSF128" disabled="" value="Y" data-key="28" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF128" name="1000023156_RendererSF128" disabled="" value="Y" data-key="28" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF128_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF128" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF128"><button id="UNDORendererSF128" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
                          <tr key="29" aria-posinset="8" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF129" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF129" id="SAVERendererSF129" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF129" name="1000023153_RendererSF129" value="29" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF129" name="1000023162_RendererSF129" value="1000000047" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF129_Display" class="form-control-static">Legal Services</span><input type="hidden" id="1000023161_RendererSF129" value="Legal Services" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF129" name="1000023155_RendererSF129" checked="Checked" disabled="" value="Y" data-key="29" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF129" name="1000023156_RendererSF129" disabled="" value="Y" data-key="29" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF129_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF129" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF129"><button id="UNDORendererSF129" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
                          <tr key="33" aria-posinset="12" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF133" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF133" id="SAVERendererSF133" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF133" name="1000023153_RendererSF133" value="33" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF133" name="1000023162_RendererSF133" value="1000000051" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF133_Display" class="form-control-static">STD Testing</span><input type="hidden" id="1000023161_RendererSF133" value="STD Testing" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF133" name="1000023155_RendererSF133" disabled="" value="Y" data-key="33" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF133" name="1000023156_RendererSF133" disabled="" value="Y" data-key="33" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF133_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF133" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF133"><button id="UNDORendererSF133" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
                          <tr key="34" aria-posinset="13" aria-setsize="24" aria-readonly="true" data-oclass="" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF134" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF134" id="SAVERendererSF134" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF134" name="1000023153_RendererSF134" value="34" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF134" name="1000023162_RendererSF134" value="1000000052" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF134_Display" class="form-control-static">STD Treatment</span><input type="hidden" id="1000023161_RendererSF134" value="STD Treatment" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF134" name="1000023155_RendererSF134" disabled="" value="Y" data-key="34" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF134" name="1000023156_RendererSF134" disabled="" value="Y" data-key="34" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF134_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF134" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF134"><button id="UNDORendererSF134" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
                          <tr key="16" aria-posinset="14" aria-setsize="24" aria-readonly="true" class="even" data-oclass="even" aria-selected="false">
                            <td nowrap="" class="icons"><input type="checkbox" value="Y" class="RowCBX form-checkbox" id="SELECTRendererSF116" disabled="" checked="" aria-label="The row has existing data"><input type="hidden" name="SAVERendererSF116" id="SAVERendererSF116" class="form-control"></td>
                            <td role="gridcell" data-eid="1000023153_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023153_RendererSF116" name="1000023153_RendererSF116" value="16" class="form-control" aria-labelledby="aria_1000023153_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023162_RendererSF1" style="text-align:right;display:none"><input type="hidden" id="1000023162_RendererSF116" name="1000023162_RendererSF116" value="1000000034" class="form-control" aria-labelledby="aria_1000023162_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023161_RendererSF1"><span id="1000023161_RendererSF116_Display" class="form-control-static">HIV Treatment</span><input type="hidden" id="1000023161_RendererSF116" value="HIV Treatment" class="form-control" aria-labelledby="aria_1000023161_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023155_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023155_RendererSF116" name="1000023155_RendererSF116" disabled="" value="Y" data-key="16" aria-labelledby="aria_1000023155_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023156_RendererSF1" style="text-align:left"><input type="checkbox" class="form-checkbox" id="1000023156_RendererSF116" name="1000023156_RendererSF116" checked="Checked" disabled="" value="Y" data-key="16" aria-labelledby="aria_1000023156_RendererSF1"></td>
                            <td role="gridcell" data-eid="1000023173_RendererSF1" style="display:none"><span id="1000023173_RendererSF116_Display" class="form-control-static"></span><input type="hidden" id="1000023173_RendererSF116" value="" data-ros="true" class="form-control" aria-labelledby="aria_1000023173_RendererSF1"></td>
                            <td id="INFORendererSF116"><button id="UNDORendererSF116" type="button" aria-label="Undo changes" onclick="UndoClick(event);" class="btn btn-undo fas fa-undo-alt" data-rsti="0" tabindex="-1"></button></td>
                          </tr>
    
                        </tbody>
                      </table>
                    </div>
    
                    </form>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search