Dynamically change the "readonly"-tag of JForm Field

Question

I got a JForm and I got some fields in there. I would like to disable a field, if the value of another field is "0". I know that I can do that by preparing the form while loading, but I want to solve that "live", so if the user clicks around, the readonly should immediately be set or unset.

How can I solve this? I guess I have to do some JQuery - unfortunately I do not have any idea of jQuery and this stuff, so maybe you could help me out?

Thanks in advance :-)

Answer 1

Joomla has introduced new form field attribute called "showon" you can add that attribute in form field xml.

Adding the attribute showon allows to hide the field based on the value(s) of another field.

Syntax to show the field "bar" only when "foo" is set to "1":

<field
    name="foo"
    type="list"
    >
    <option value="1">JYES</option>
    <option value="0">JNO</option>
</field>
<field
    name="bar"
    type="text"
    showon="foo:1"
/>

To match multiple values one can provide a comma-separated list of values. Like showon="foo:1,2"

This was introduced with PullRequest: https://github.com/joomla/joomla-cms/pull/3379, available starting with Joomla 3.2.4.

Answer 2

You can simply achieve this using jQuery by adding the disabled attribute based on the value, like so:

jQuery(document).ready(function($) {

    var inputFirst  = $('#jform_choose0');
    var inputSecond = $('#jform_choose1');

    inputFirst.on('change', function(){

        if ($(this).val() == 0) {
            inputSecond.prop('disabled', true);
        }
        else {
            inputSecond.prop('disabled', false);
        }

    });

});

Here is a live preview for you to test:

http://jsfiddle.net/k3s6g2f7/

You will of course need to change the ID's that have been defined according to your own input fields.