11

I am using lightning:input of different types. Using readonly=true in input of type text is working but does not work for checkbox or for lightning:select.

Anyone got any clue for this?

2
  • what browser are you viewing this on? Jan 17, 2017 at 12:03
  • @SimonLawrence Google chrome
    – Sarang
    Jan 17, 2017 at 12:18

3 Answers 3

14

You may use attribute disabled instead of readonly.

Here's an example with lightning:input [checkbox] and lightning:select:

<div>
    Checkboxes
    <lightning:input type="checkbox" label="Red" name="red" checked="true" disabled="true"/>
    <lightning:input type="checkbox" label="Blue" name="blue" disabled="true"/>
</div>

<br/>

<div>
    <lightning:select name="selectItem" label="Select an item" value="2" disabled="true">
        <option value="">choose one...</option>
        <option value="1">one</option>
        <option value="2">two</option>
    </lightning:select>
</div>

enter image description here


HTML docs say that readonly does not work for checkbox and that select does not have a readonly attribute.

Doc for select:

SELECT ... does not have a READONLY attribute. The reason is that technically lists don't have values... they have selected options, which themselves have values. You may wish to see , which disables the list.

Doc for checkbox:

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. For many types of fields, READONLY is irrelevent because you don't normally change the value. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field. DISABLED, however, actually prevents you from using the field. Notice in these examples that you can set the checkboxes even though they are "read only"

Both suggest using the disabled attribute.

3
  • 1
    yes that can certainly be a workaround, but I don't want it to show disabled, rather I want to show them read only, and after click of an 'edit' button, want them all to be editable. Showing all fields disabled by default doesn't pose a good picture, but keeping them read only makes it look good.
    – Sarang
    Jan 17, 2017 at 11:49
  • HTML docs say that readonly does not work for checkbox and that select does not have a readonly attribute. I have updated my answer. Please have a look. Both docs suggest using the disabled attribute.
    – S..
    Jan 17, 2017 at 12:28
  • 1
    Thank you! I was using this with <lightning-input type="search"/> and using disabled was exactly what I needed. Using read-only covers the search icon. Apr 20, 2021 at 19:04
1

The readonly attribute is not supported on input type="checkbox" - as you can see by fiddling around here:

https://jsfiddle.net/xue78fhd/

to stop a checkbox being fiddled you need to do add a little javascript event "hack" to the the onclick, like this:

http://jsfiddle.net/wfVFW/3/

1

yes, readonly maynot work as intended for checkbox/toggle type lightning input, but we can handle this in js code. if we want it to be fixed in checked/unchecked under certain conditions, we can make use of onchange attribute to fix value in checked/unchecked

in html of LWC

<lightning-input type="toggle" data-name="fixvalue" label="Toggle" onchange={toggleHandler} message-toggle-active="Yes" message-toggle-inactive="No" checked={isChecked}>
</lightning-input>

in js code:

    toggleHandler(){
        if(//your condition where you want checkbox/toggle input to be
        fixed)
        {
            //assume you want it to be checked always
            this.template.querySelector('lightning-input[data-name="fixvalue"]').checked = true;
        }
        else
        {
            your regular toggle/checkbox handler
        } 
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.