Rule doesn't work for checkbox

[JulieVelghe]

What happened?

I have testform with 1 checkbox, 1 dropdown and a numbers field.
I have a rule set to show the numbers field when either the value in the dropdown is Yes, or the checkbox is checked.
The dropbox seems to trigger the numbers field just fine, but the checkbox doesn't.

My checkbox uses the following code:

{% case 'checkbox' %}
    <div class="c-form__field c-form__field--options" data-field-container="{{ field.handle }}">
        <div class="c-form__field-stack">
            <div class="c-form__field c-form__field--option" >
                {{ field.renderInput({
                    attributes: {
                        input: {
                            class: "c-form__input"
                        }
                    }
                }) }}
                <label class="c-form__option__label" for="{{ field.idAttribute }}">{{ field.label|t('freeform') }}{% if not field.required %} {{ '(optional)'|t('freeform') }}{% endif %}</label>
            </div>
        </div>
        {{ field.renderInstructions({
            attributes: {
                instructions: {
                    class: "c-form__field__instruction",
                },
            }
        }) }}
        {{ field.renderErrors({
            errorClass: 'c-form__errors'
        }) }}
    </div>

When I inspect the page and look at the data-rules-json, the condition seems to expect a value of 1 for the checkbox field, but It seems to have a value of yes?

How can we reproduce this?

1. create a form with a checkbox and a (number) field
2. add a rule to the (number)field to show it when the checkbox is checked

Versions

Freeform Pro 5.3.4
Craft 4.9.7

[kjmartens]

Hi @JulieVelghe,

Did you by chance, originally have a different rule set for this condition?

For example, did you have something set up like this:

And then switch it to something like this:

If so, can you click onto the (or any) one you had set before and be sure to clear out the old values, then set back to is equal to checked and resave the form?

It shouldn't do this, but in my testing, this is how I was able to duplicate the issue. Once I removed the 1 from contains and switched it back to is equal to checked and resaved the form, it worked again. 🙂

We'll look into resolving that issue though.

[JulieVelghe]

Hi @kjmartens , I did not have such a setup, it was immediately the checked rule.
As a test, I changed it to the 'wrong' rule, and than changed it back, the way you tested it. Unfortunately, it still doesn't work for me.

[gustavs-gutmanis]

Hi @JulieVelghe,

It seems that you're rendering the field container manually. I would advise not doing that, but instead pass in your classes to the container manually.

So instead of this:

<div class="c-form__field c-form__field--options" data-field-container="{{ field.handle }}">

do this:

{{ field.renderContainerOpeningTag({ 
  attributes: { 
    class: "c-form__field c-form__field--options" 
  } 
}) }}

   <!-- ... your code here --> 

{{ field.renderContainerClosingTag }}

This lets you utilize the attribute editor in the builder, as well as make sure that you always get relevant attributes added to the field.

In this case you need a data-field-type="checkbox" attribute for your checkbox container, for the conditional rules to work correctly.

[JulieVelghe]

adding the data-field-type fixed it, thank you very much for the help :)