2

I'm pretty new to this LWC environment and trying to change jQuery to the LWC friendly.

So this is about the checkbox where you can select all the options, but when you click on the "None of the above" It will make all the options read-only and unchecked.

enter image description here


enter image description here

So this was the code behind (no LWC)

<HTML>
    <body>

      <form id="numberForm">
        <div>
        <input type="checkbox" value="1"/>1
        <br/>
        <input type="checkbox" value="2"/>2
        <br/>
        <input type="checkbox" value="3"/>3
        <br/>
        <input type="checkbox" value="4"/>4
        <input type="checkbox" value="5"/>5
        <br/>
      </form><br/>
      <input type="checkbox" value="" onclick="enableDisableAll(this);"/>None of the above
      
      <script src="script.js">
      </script>

    </body>
  </html>
    

  function enableDisableAll(e) {      
    var own = e;
    var form = document.getElementById("numberForm");
    var elements = form.elements;

    for (var i = 0 ; i < elements.length ; i++) {
      if(own !== elements[i] ){
        if(own.checked == true){
          elements[i].disabled = true;
          elements[i].checked = false;
        }else{ 
          elements[i].disabled = false;  
        }
      }
    }
  }

And now I've change index.html to LWC but still having a hard time changing script.js

<template>
   <form id="numberForm">
      <lightning-input type="checkbox" label="1" value="1"></lightning-input>
      <lightning-input type="checkbox" label="2" value="2"></lightning-input>
      <lightning-input type="checkbox" label="3" value="3"></lightning-input>
      <lightning-input type="checkbox" label="4" value="4"></lightning-input>
      <lightning-input type="checkbox" label="5" value="5"></lightning-input>
    </form>
<lightning-input type="checkbox" label="None of the above" value="none" onclick={enableDisableAll}>    </lightning-input>

Any idea or comment?

2 Answers 2

3

I won't comment too much on your code, however, there are some things you need to consider when migrating to LWC.

for starters, document.getElementById("numberForm") is not supported. Instead, use template.querySelector's. for more on this, refer to Access elements a component owns

as per your choice of displaying checkboxes, instead of hardcoding checkboxes in your template, consider using another approach, and declare an array of objects for your different checkboxes, and use the template directives to render them dynamically. This will allow you to directly access properties from a constant vs having to query your DOM and modify DOM properties, and then modify your js constants

find bellow an example of how to do this and adding a change handler to update your input checkboxes.

template.html

<template for:each={checkboxes} for:item="chk">
    <lightning-input type="checkbox" label={chk.label} value={chk.value} checked={checked} onchange={handleChange}></lightning-input>
</template>

template.js

checkboxes = [
{label: 'checkbox 1', value: 'some value', checked: false, name: 'some name'}]

handleChange(e) {
  this.checkboxes = this.checkboxes.map( chx => { return { ...chx, checked: (e.target.name === chx.name) ? e.target.checked : chx.checked }}
}
4
  • I've recently implemented something like the above utilizing Maps - which I wouldn't recommend in hindsight, because it doesn't go well in exchange with @AuraEnabled methods. Could you elaborate a little bit, how you'd do this with both JSON and arrays?! Mar 3, 2022 at 21:02
  • Thx, glls, really appreciate it (although strictly speaking you are still not using JSON ;-) Mar 3, 2022 at 22:14
  • indeed - should rephrase to array of objects or something like that. ill amend shortly
    – glls
    Mar 3, 2022 at 22:16
  • Thanks glls for the help. This will help a lot.
    – Ian Lee
    Mar 3, 2022 at 23:29
0

It's very simple no need onclick fuction

html:

<template for:each={checkboxes} for:item="chk">
<lightning-input class="checkBoxFld" type="checkbox" label={chk.label} value={chk.value} checked={checked}></lightning-input>

css:

.checkBoxFld{ pointer-event : none;}

js:

checkboxes = [ {label: 'checkbox 1', value: 'some value', checked: checked, name: 'some name'}]

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .