Question

0

104

Views

Ordering Checkbox and its label

I am working in the Oracle CPQ tool, and I'm trying to create a checkbox as an attribute.

In the UI I am getting the following:

When reviewed in the browser source (which is generated by the CPQ tool), I can 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 switch the checkbox and the label, placing the checkbox before the label 'Membership free' using CSS or JavaScript, considering I cannot directly edit the HTML using the CPQ tool attribute.

So any way to do that?

After Sagar V updated javascript

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-13T21:01:32.587Z

The JavaScript

get the label element
remove it from original position
add it after the input

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>

0

104

Ordering Checkbox and its label

1 answers

0

The JavaScript

Find remote jobs

Andres GPT