Can I control properties of all input elements easily?

[lazex]

My page has many input elements. And, those elements are disabled by a flag.

In simple idea, I write disabled property for all input elements.

let global_disabled_flag = true

bind(document.body)`
    <input type="checkbox" checked=${data.value1} disabled=${global_disabled_flag}>

    <input type="checkbox" checked=${data.value2} disabled=${global_disabled_flag}>

    <input type="number" value=${data.value3} disabled=${global_disabled_flag}>

    <input type="text" value=${data.value4} disabled=${global_disabled_flag}>

    ...
`

I think it is hard and not better way.

In jQuery, we can write simple like below.

$(":input").prop("disabled", global_disabled_flag)

Does hyperHTML provide any better way for these case?

[WebReflection]

you are comparing a declarative way to define your DOM against a function that assumes your DOM is already there ... not much of a comparison.

You can do the jQuery thing with hyperHTML too, if you want.

bind(document.body)`
    <input type="checkbox" checked=${data.value1}>
    <input type="checkbox" checked=${data.value2}>
    <input type="number" value=${data.value3}>
    <input type="text" value=${data.value4}>
`;
$(":input").prop("disabled", global_disabled_flag);

or you can use better hyperHTML through a function.

function update(data, disabled) {
  bind(document.body)`
  <input type="checkbox" checked=${data.value1} disabled=${disabled}>
  <input type="checkbox" checked=${data.value2} disabled=${disabled}>
  <input type="number" value=${data.value3} disabled=${disabled}>
  <input type="text" value=${data.value4} disabled=${disabled}>`;
}

update({value1: 1, value2: 2, value3: 2, value4: 4}, true);

setTimeout(() => {
  update({value1: 11, value2: 12, value3: 12, value4: 14}, false);
});

If you prefer to work with jQuery and do not declare your layout then I suggest you don't use hyperHTML.

[lazex]

I understand. Thank you for your answer.