Checkbox in html

Development Web Development
1

First of all have a look at the code:

<td>
    <input
        type="checkbox"
        name="repriseCheckBox"
        disabled={checkStat == 21 ? true : false}
    />
</td>

Now I want to use a condition to enable or disable a checkbox in a table row.

If checkStat = 21, disable the checkbox; else, leave it enabled.
It isn’t working. It disables all checkboxes. Do you have any suggestions?

2

What language framework are you using? This might help people provide language specific recommendations.

  • Vue
  • Angular
  • React

But I would recommend changing your function to be an inverse instead as the return true or flase is redundant.

I.E

disabled={checkStat !== 21}
1 Like
3

Try something like this:

<input
        type="checkbox"
        name="repriseCheckBox"
        {% checkStat == 21 ? "disabled" : "" %}
    />
1 Like
4

Please tell us a bit more about your setup.
Am I correct in assuming that there is some server-side software that produces the HTML table?
If so, it probably uses templates to generate the HTML table, which you could modify to include your logic.

If not(e.g. static site), or if you don’t want to change the server-side code, you can do what you want with plain JavaScript(No JS framework required).

If checkStat does not change at runtime, just put something like this anywhere on your page:

<script>
let table_elem = document.getElementById("enter-table-id-here")
for input_elem in table_elem.querySelectorAll(".input[type=checkbox]") {
    input_elem.disabled = checkStat == 21
}
</script>

Otherwise you’ll need to run the code above after every change to checkStat(e.g. put it in a function and call it afterwards)

1 Like
5

Which template system or scripting language uses {% & %} to insert code? Are we sure @jesse_white is not using something different which escapes with bare { & }?

1 Like
6

Admittedly, you were correct on everything, and thank you for your response.

1 Like
7

That’s jinja template syntax BTW. Handlebars is double curly brackets.

1 Like