Won't fix <xf:checkbox> sub-options do not respect the 'disabled' attribute when JavaScript is enabled

[alexD]

Affected version

2.0.4

With JavaScript disabled, the input remains disabled:


With JavaScipt enabled, the checkbox gets enabled and can be toggled:


Template modification for the account_preferences template to quickly reproduce it:
Find (simple):

('you_will_receive_emails_sent_by_administrator_to_all_members') }}" />

Replace:

('you_will_receive_emails_sent_by_administrator_to_all_members') }}">
    <xf:checkbox>
        <xf:option value="receive_weekly_digests"
                   name="option[datio_emailDigests_receive_weekly_digest]"
                   checked="{{ $xf.visitor.Option.datio_emailDigests_receive_weekly_digest ? true : false  }}"
                   label="{{ phrase('datio_emailDigests_receive_weekly_digests') }}">
            <xf:checkbox>
                <xf:option value="receive_daily_digests"
                           disabled="disabled"
                           name="option[datio_emailDigests_receive_daily_digest]"
                           checked="{{ $xf.visitor.Option.datio_emailDigests_receive_daily_digest ? true : false && $xf.visitor.hasPermission('general', 'receiveDailyDigests') }}"
                           label="{{ phrase('datio_emailDigests_receive_daily_digests') }}" />
            </xf:checkbox>
        </xf:option>
    </xf:checkbox>
</xf:option>

--

EDIT:
Using radio buttons has the same issue.


(the input gets enabled again when JavaScript is enabled)

('you_will_receive_emails_sent_by_administrator_to_all_members') }}">
    <xf:radio name="digest_type" value="{{ $xf.visitor.Option.datio_emailDigests_receive_weekly_digest ? 'weekly' : 'daily' }}">
            <xf:option value="weekly" label="{{ phrase('datio_emailDigests_receive_weekly_digests') }}" />
            <xf:option value="daily" label="{{ phrase('datio_emailDigests_receive_daily_digests') }}" disabled="disabled" />
    </xf:radio>
</xf:option>

 

[Chris D]

Unfortunately, the message at the top of the page is fairly emphatic - if you disable JavaScript in a modern web application, you're going to experience issues and we don't recommend doing that.

When issues, such as this, arise then we're not necessarily going to be able to resolve them. In this case, the disabled property is added when the page is rendered i.e. the server side at which point we can't know whether the client side will have JavaScript enabled or not to work around that.

 

[alexD]

The problem is that that the form elements in the above examples work as expected only when JavaScript is disabled.
When it's enabled, the library or code you're using overwrites the disabled attribute of any children elements, based on the parent status.

It's definitely an edge case but I no longer need it fixed. My workaround was the following:

 

[Chris D]

Sorry, I misunderstood what you were reporting.

But, yes, I think your current approach makes a lot more sense anyway.