Betinget visning av felter Bruk at dependant-attributtene i radio og checkbox komponentene.

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Tilgjengelig i Beskrivelse
dependant-element string ""
dependant-id string ""
dependant-guid string ""
dependant-class string ""
dependant-ids JSON-array:string ""
dependant-guids JSON-array:string ""
dependant-classes JSON-array:string ""
show-dependant-if-checked boolean ""
hide-dependant-if-checked boolean ""
show-dependant-if-blank boolean ""
hide-dependant-if-blank boolean ""

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Vises, eller ikke vises. Det er spørsmålet!

Vises, eller ikke vises. Det er spørsmålet!

<lk-checkbox-group
    guid="indepentantRadio1"
    group-name='indepentantRadio1'
    group-label='Skal divven vises?'
    checkbox-labels='["Ja","Jo kanskje","Nei"]'
    dependant-id='dependantDiv1'
    hide-dependant-if-value='Nei'
></lk-checkbox-group>

<div id="dependantDiv1" class="no-display background--tint-blue padding--medium">
    <p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
    <lk-input-block 
        guid="automagiskRequired1"
        input-name="automagiskRequired1"
        preset="personalid"
        data-auto-required>
    </lk-input-block>
</div>


<lk-checkbox-group
    guid="indepentantRadio2"
    group-name='indepentantRadio2'
    group-label='Skal divven vises?'
    checkbox-labels='["Ja","Neppe det","Nei"]'
    dependant-id='dependantDiv2'
    show-dependant-if-value='Ja'
></lk-checkbox-group>

<div id="dependantDiv2" class="background--tint-blue padding--medium">
    <p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
    <lk-input-block 
        guid="automagiskRequired2"
        input-name="automagiskRequired2"
        preset="personalid"
        required
        data-auto-required>
    </lk-input-block>
</div>

Vises, eller ikke vises. Det er spørsmålet!

Kort beskrivelse...

Vises, eller ikke vises. Det er spørsmålet!

<lk-checkbox-group
    guid="indepentantRadio1"
    group-name='indepentantRadio1'
    hidden-field-names='["indepentantRadio1[0].hidden", "indepentantRadio1[1].hidden", "indepentantRadio1[2].hidden"]'
    group-label='Skal divven vises?'
    checkbox-labels='["Ja","Jo kanskje","Nei"]'
    dependant-id='dependantDiv1'
    hide-dependant-if-value='Nei'
></lk-checkbox-group>

<div id="dependantDiv1" class="no-display background--tint-blue padding--medium">
    <p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
    <lk-input-block 
        guid="automagiskRequired1"
        input-name="automagiskRequired1"
        preset="personalid"
        data-auto-required>
    </lk-input-block>
</div>


<lk-checkbox-group
    guid="indepentantRadio2"
    group-name='indepentantRadio2'
    group-label='Skal divven vises?'
    checkbox-labels='["Ja","Neppe det","Nei"]'
    dependant-id='dependantDiv2'
    show-dependant-if-value='Ja'
>
    <div slot='help-text'>
        <p>Kort beskrivelse...</p> 
    </div>
</lk-checkbox-group>

<div id="dependantDiv2" class="background--tint-blue padding--medium">
    <p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
    <lk-input-block 
        guid="automagiskRequired2"
        input-name="automagiskRequired2"
        preset="personalid"
        required
        data-auto-required>
    </lk-input-block>
</div>

Hvor finner jeg denne koden?