Estoy trabajando en la herramienta Oracle CPQ y estoy tratando de crear una casilla de verificación como atributo.

En la interfaz de usuario obtengo lo siguiente:

Cuando se revisa en la fuente del navegador (que es generada por la herramienta CPQ), puedo ver el siguiente código HTML:

 <div class="form-item clearfix null" id="attr_wrapper_1_chkmembershipFeePayment_t" style="display: table;"> <label class="form-label" for="chkmembershipFeePayment_t" style="width: 100px"> <span style="padding-right: 5px;display: table-cell;">Membership Fee</span> </label> <div class="form-element field-wrapper" id="field_wrapper_1_chkmembershipFeePayment_t" style="padding-left:100px"> <div class="boolean-wrapper field" message="" style="display: table-cell;"> <div class="boolean-wrapper-inner"><input value="false" class=" form-input cm-attr-value " name="chkmembershipFeePayment_t" onclick="if (this.checked) { this.value='true'; } else { this.value='false'; }" data-is-boolean="true" type="checkbox"> </div> <input value="true" name="_boolean_present_chkmembershipFeePayment_t" type="hidden"> </div> <div id="msg_1_chkmembershipFeePayment_t" class="error-hover" data-action-message="" message=""></div> </div> ::after</div>

Mi pregunta es: ¿Cómo puedo cambiar la casilla de verificación y la etiqueta, colocando la casilla de verificación antes de la etiqueta 'Membresía gratis' usando CSS o JavaScript, considerando que no puedo editar directamente el HTML usando el atributo de la herramienta CPQ?

Entonces, ¿alguna forma de hacer eso?

Después de Sagar V javascript actualizado