Pode fazer assim, chamando uma função com oninput
enviando 2 parâmetros: value
do checkbox
, que servirá como seletor, e valor do input
. Quando for 0
, desmarca o checkbox
:
function marcaBox(b,v){
document.querySelector("[type='checkbox'][value='"+b+"']").checked = v > 0 ? true : false;
}
<input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
<strong style='color: #000000'>Peq. Almoço</strong></div> <div style='width:40%;position:relative;float:left'>
<input $disabled min='0' oninput='this.value = Math.abs(this.value); marcaBox("Peq_Almoço", this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
Para múltiplos elementos
A lógica é quase a mesma, mudando apenas os parâmetros e a forma de selecionar o checkbox
:
function marcaBox(e){
var box = e.parentNode.previousElementSibling.querySelector("[type='checkbox']");
box.checked = e.value > 0 ? true : false;
}
<div>
<input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
<strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
<input $disabled min='0' oninput='this.value = Math.abs(this.value); marcaBox(this)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>
<div>
<input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
<strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
<input $disabled min='0' oninput='this.value = Math.abs(this.value); marcaBox(this)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>
Pode criar também eventos para cada input
, aí neste caso não precisa chamar a função no oninput
:
var inputs_ = document.querySelectorAll("[type='number']");
for(var x=0; x<inputs_.length; x++){
inputs_[x].addEventListener("input", function(){
var box = this.parentNode.previousElementSibling.querySelector("[type='checkbox']");
box.checked = this.value > 0 ? true : false;
});
}
<div>
<input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
<strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
<input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>
<div>
<input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
<strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
<input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>