Checkbox "Order" and its label
I am working in Oracle CPQ tool and I am trying to create a checkbox as an attribute.
In the UI, I get this:
When looking at the browser source (which is generated by the CPQ tool), I see the following HTML code:
<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>
My question is, how can I check the box and the label by checking the box in front of the Membership Free label using CSS or JavaScript, given that I cannot directly edit the HTML using the CPQ tool attribute.
So is there any way to do this?
After Sagar V javascript updated
+3
source to share
1 answer
JavaScript
- get a label element
- remove it from its original position.
- add it after typing
elm = document.querySelector('label[for=chkmembershipFeePayment_t]');
target = document.querySelector("input[type=checkbox]");
elm.parentNode.removeChild(elm);
target.parentNode.insertBefore(elm, target.nextSibling);
<label class="form-label" for="chkmembershipFeePayment_t" style="width: 100px">
<span style="padding-right: 5px">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="">
<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>
+2
source to share