[bug?] checkbox and toggle

Questions
1

I retrieve the data remotely, then I do a loop with map and inside I do a check to precheck the checkbox type input

I also tried updating the dom with a $update();

what am I doing wrong?

<input type=“checkbox” name=“tosend” ${ tran.id_nota_spesa !== null ? checked : $h``}" />

if I print ${ tran.id_nota_spesa !== null ? checked : $h``} outside of … checked is correctly printed

here full code

Screenshot 2023-10-05 alle 21.39.39
Screenshot 2023-10-05 alle 21.39.392240×1458 347 KB

2

Yesterday, I experienced a similar issue with smart select. The selectbox was not definitively taking the ‘selected’ value. After an hour of struggle, I decided to do it like this:

After everything loaded and the DOM was created:

let Selected = 2; // selected value
let Element = $f7.smartSelect.get('.language_selector');
Element.setValue(Selected);

You can set the value like this.

3

@badursun checkbox and toggle not have js function as smartselect

4

Yeah, you’re right. But with my method you can handle it with native js or jquery.

document.getElementById("myCheck").checked = true;

or

$("#myCheck").prop('checked', true);

I hope we have understood each other correctly and that my way will be a solution for you.

5

@badursun at the moment, my solution is jsx component

i’ve created this file


export default (props, {$f7, $on, $, $store, $update}) => {
    var checkbox = props.data;
    console.log('[ComponenteCheckbox]', checkbox); 

    return () => (
        <div class="checkboxdiv">
        {checkbox ? (
            <label class="checkbox">
            <input type="checkbox" class="toSend" checked />
            <i class="icon-checkbox"></i>
            </label>
          ) : (
            <label class="checkbox">
            <input type="checkbox" class="toSend" />
            <i class="icon-checkbox"></i>
            </label>
          )}

        </div>
    )
  }

in main file i’ve included jsx component

import ComponenteCheckbox from '../components/form-checkbox.f7.jsx';

and i’ve injected with

<${ComponenteCheckbox} data="${tran.myvalue}" />

@nolimits4web Is there something I’m missing?