How to align contact 7 checkbox +Label to center horizontally on the page?

I cant seem to get the checkbox on the contact 7 form in wordpress to align in the center without turning everything in my form centered. I dont know what im doing wrong so if anyone could point me in the right direction i would be grateful.

<div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="form_name">First Name *</label><input id="form_name" type="text"     name="name" class="form-control" required="required" data-error="name is required.">
                <div class="help-block with-errors"></div>
             </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="form_name">Last Name *</label><input id="form_name" type="text" name="surname" class="form-control" required="required" data-error="name is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="form_email">Email *</label><input id="form_email" type="email" name="email"  class="form-control" required="required" data-error="Valid email is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="form_phone">Phone Number *</label><input id="form_phone" type="tel" name="phone" class="form-control">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label>Preferred Contact Method</label>[text PreferredContactMethod "Email/Phone"]
           </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label>Desired Moving Date</label>[date DesiredMovingDate] 
          </div>
        </div>
<div class="mb-12">
             <div class="col-md-12 col-lg-12"> <position:center>
                <label>Desired Unit Type</label>[checkbox DesiredUnitType use_label_element "Studio" " 1-Bedroom  " " 2-Bedroom  " "3-Bedroom" "Penthouse"]

          </div>
       </div>
       
       <div class="col-md-12">
                <label>Message</label>[textarea Message]
<div class="col-md-12">[submit class:btn class:btn-default class:btn-sm "Send"]</div>
    </div>
</div>

JavaScript can't check MDL checkbox [duplicate]

When I click on "Check", only the normal checkbox gets checked and not the MDL one (as shown in the image below). Would someone know why this is happening?

function check() {
  document.getElementById('mdl').checked = true;
  document.getElementById('normal').checked = true;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-deep_purple.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="mdl">
  <input type="checkbox" id="mdl" class="mdl-checkbox__input">  
  <span class="mdl-checkbox__label">MDL</span>
</label>
<input type="checkbox" id="normal" name="normal">
<label for="normal"> Normal</label><br>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised" onclick="check()">Check</button>

Javascript: How do I append the label textContent after a custom span checkbox?

Looking for some help/knowledge with moving the label text to the right side of the custom checkbox instead of the left.

If you check the CodePen link below you will see that upon adding a new list item that the label text is on the wrong side of the custom checkbox. I added some hard coded list items for reference of what I want it to look like. If you have a solution to this problem please help educate me.

CodePen: Todo List

Desired HTML output

<li class="todo__list--item">
  <input type="checkbox" id="task-1" name="task-1" />
  <label for="task-1" class="todo__label">
    <span class="custom__checkbox"></span>
    Hard code list item #1
  </label>
  <button class="btn-del" type="button">
    <img src="../images/icon-cross.svg" alt="">
  </button>
</li>

JavaScript

const usrInput = document.getElementById('create-new');
const itemCount = document.querySelector('.item-count');

function addToList() {
  const input = document.createElement('input'); 
        input.className = 'input__cb';
        input.id = 'input';
        input.type = 'checkbox';
  const spanCB = document.createElement('span');
        spanCB.className = 'custom__checkbox';
  const label = document.createElement('label');
        label.className = 'todo__label';
        label.setAttribute('for', 'input');
        label.textContent = usrInput.value;
        label.appendChild(spanCB);
  const img = document.createElement('img');
        img.src = 'https://raw.githubusercontent.com/meetjoewarren/learning-center/9b6cbb922ae2c81be98b6a0374bfcd08a0081e98/frontend-mentor/todo-app-main/images/icon-cross.svg';
  const button = document.createElement('button');
        button.className = 'btn-del';
        button.type = 'button';
        button.appendChild(img);
  const listItem = document.createElement('li');
        listItem.className = 'todo__list--item';
        listItem.draggable = 'true';
        listItem.appendChild(input);
        listItem.appendChild(label);
        listItem.appendChild(button);
  const details = document.querySelector('.todo__list--details'); 
  const fragment = new DocumentFragment();
        fragment.appendChild(listItem);
  const list = document.querySelector('.todo__list');
        list.insertBefore(fragment, details);
  itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  usrInput.value = '';
}

// Add to list on 'Enter' press
usrInput.addEventListener('keydown', e => {
  if (e.code === 'Enter') {
    addToList();
  }
})


// Delete Button
const deleteBtn = document.querySelectorAll('.btn-del');

for (let i = 0; i < deleteBtn.length; i++) {
  deleteBtn[i].addEventListener('click', e => {
    e.target.parentElement.parentElement.remove();
    itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  })
}

// If checked cross out
// const inputCB = document.querySelectorAll('.input__cb');
// const todoLabel = document.querySelectorAll('.todo__label');
// for (let i = 0; i < todoLabel.length; i++) {
//   if (inputCB == true) {
//     todoLabel[i].classList.add('strikeout');
//   } else {
//     return;
//   }
// }

Also, bonus question... how would I go about observing changes to the list so I can update the remove/delete button function? Mutation Observer? Right now it is only attaching the event listener to the currently hard coded list items.

How to disable checkboxes in a Checkbox Group imported from dash mantine components (e.g. dmc)?

Dear Stackoverflow Members

I am currently looking for advice on how to disable a Checkbox from the CheckboxGroup so as to prevent multiple selection.

As an illustration, please find below a sample code built:

  dmc.CheckboxGroup(
                      id="checkbox-group",
                      orientation="horizontal",
                      offset="md",
                      mb=10,
                      children=[
                                 dmc.Checkbox(label="LABEL_A", value="lbl_a"),
                                 dmc.Checkbox(label="LABEL_B", value="lbl_b"),
                                 dmc.Checkbox(label="LABEL_C", value="lbl_c"),
                               ],
                   ),

 @app.callback(
                Output("checkbox-group", "children"), Input("checkbox-group", "value"),
              )

 def select(checkbox):

       if "lbl_a" in checkbox:
                return [
                         dmc.Checkbox(label="LABEL_A", value="lbl_a", checked= True),
                         dmc.Checkbox(label="LABEL_B", value="lbl_b", disabled= True),
                         dmc.Checkbox(label="LABEL_C", value="lbl_c", disabled= True),
                       ] 

Thanks in advance.

Best wishes.

Getting checkbox value from database in CodeIgniter and ajax request

I'm trying to get the value of book_active column (ENUM data type) from database. If equals 'Y' checkbox should be checked and if not, checkbox value should be 'N'.

jquery bit:

`  function edit_book(id) {
    /*    var formData = $('#form').serialize();
        console.log('Posting the following: ', formData); */

    save_method = 'update';
    $('#form')[0].reset(); // reset form on modals
    $.ajax({ //Load data from ajax
      url: "<?php echo site_url('book/ajax_edit/') ?>" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="book_id"]').val(data.book_id);
        $('[name="book_isbn"]').val(data.book_isbn);
        $('[name="book_title"]').val(data.book_title);
        $('[name="book_author"]').val(data.book_author);
        $('[name="book_category"]').val(data.book_category);
        $('[name="book_date"]').val(data.book_date);
        $('#modal_form').modal('show'); // show bootstrap modal when loaded complete
        $('.modal-title').text('Edit Book'); // Set title to Bootstrap modal title
        $('#errors').addClass('d-none');
        var date_string = dayjs(data.book_date, "YYYY-MM-DD HH:mm:ss").format("DD.MM.YYYY, HH:mm"); //Format date in form
        $('[name="book_date"]').val(date_string);

        //  $('[name="book_active"]').val(data.book_active);
        if ($('[name="book_active"]').val(data.book_active) == 'Y') {
          $('[name="book_active"]').prop("checked", true).val();
        } else {
          $('[name="book_active"]').prop("checked", false).val();

        }

        /*
              var SlectedList = new Array();
              $("input.form-check:checked").each(function() {
                SlectedList.push($(this).val(data.book_active));
              });


            
                     if ($('[name="book_active"]').val() == 'Y') {
                       $('[name="book_active"]').prop("checked", true);
                     } else {
                       $('[name="book_active"]').prop("checked", false);
                     }


                    
                     if (val(data.book_active) != NULL) {
                       $('[name="book_active"]').prop("checked", true);

                     } else {
                       $('[name="book_active"]').prop("checked", false);
                     }
                     */

      },
      // complete: function() {
      //   alert('ajax completed!');
      // },
      error: function(jqXHR, textStatus, errorThrown) {
        alert('Error get data from ajax');
      }
    })
  }`

input field in html:

`<input name="book_active" id="book_active" type="checkbox" role="switch" class="form-check-input" <?= (isset($book->book_active)) ? set_checkbox('book_active', 'Y', false) : set_checkbox('book_active', 'N', false) ?>>`

I've tried many snippets but I'm stuck. Commented bits don't work.

Why does this boolean gives null value? [closed]

Hi, I would like to know why those 2 booleans give me 2 differents answers ?

                Boolean b1 = CheckBox.getvalue();
                boolean b2 = CheckBox2.getvalue();
                
                System.err.println(b1); // NULL
                System.err.println(b2); // false

Checkbox design bootstrap

I'm trying to get a checkbox to look like this

correct box

what I've tried

                     <div class="col-2">
                            <label for="WitholdingTax">Charge</label>
                            <div class="input-group mb-3">
                                <input type="checkbox" class="form-control" style="height:50px" aria-label="Amount (to the nearest dollar)">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" style="height:50px">0</span>
                                </div>
                                <div class="input-group-append">
                                    <span class="input-group-text" style="height:50px">%</span>
                                </div>
                            </div>
                        </div>

And that looks like this Wrong box