Q: HTML: Is placing autonomous checkbox inside a button possible? I've found several examples of placing another control inside a clickable button, but always with result that it's handlers are taken over by the parent button:


var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  alert('Checkbox clicked')
};
checkbox.onchange = evt => {
  alert('Checkbox changed')
};
<button id="button" style="width: 150px;">
      ClickMe
      <input type="checkbox" id="checkbox" style="float: right;" />
    </button>


I'm curious if the checkbox could somehow efface the surrounding button in the click event processing sequence, in another word if clicking directly on the checkbox would change it's state and stopped propagating the click, while clicking on the button anywhere except the checkbox would send click event to the button (I suppose if the button wasn't an active element it would be so)

A: In your code please disable the button when you mouse over the checkbox,
and enable it when it is mouse out
code


var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
/*...Add this line...*/
checkbox.onmouseover = evt => {
  button.disabled = true
};
checkbox.onmouseout = evt => {
  button.disabled = false
};
/*...Add this line...*/
checkbox.onclick = evt => {
  alert('Checkbox clicked')
};
checkbox.onchange = evt => {
  alert('Checkbox changed')
};
<button id="button" style="width: 150px;">
      ClickMe
      <input type="checkbox" id="checkbox" style="float: right;"/>
    </button>



A: If I understand correctly - you want the button to register provided that the checkbox is unchecked.
Have you tried using !checkbox.checked in an if statement when the button is clicked to allow/block the click.

A: You can not click on the checkbox input without clicking the button because the button is not only clickable but also is the parent of checkbox input
but you can check if either the checkbox is check or not but using an if statement
like (checkbox.checked) for checked checkbox or (!checkbox.checked)
Example


var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  if (checkbox.checked) {
    alert('Checkbox is checked');
  } else {
    alert('Checkbox is unchecked');
  }
}
<button id="button" style="width: 150px;">
  ClickMe
  <input type="checkbox" id="checkbox" style="float: right;" />
</button>



Or if you want the button do not raise pop while checkbox is checked or uncheck you can simply disable the button for short time while checkbox is clicked but you won't use an alert in that case you'll use confirm in order to get set condition based on the checkbox pop
Example


var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  button.setAttribute('disabled', '');
  if (checkbox.checked) {
    x = confirm('Checkbox is checked');
    setTimeout(
      () => {
        if (x || !x) {
          button.removeAttribute('disabled', '');
        }
      }, 100);
  } else {
    confirm('Checkbox is unchecked');
    setTimeout(
      () => {
        if (x || !x) {
          button.removeAttribute('disabled', '');
        }
      }, 100);
  }
}
<button id="button" style="width: 150px;">
  ClickMe
  <input type="checkbox" id="checkbox" style="float: right;" />
</button>


