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 :-)

2 Answers 2


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":

    <option value="1">JYES</option>
    <option value="0">JNO</option>

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.

  • To clarify, this will completely hide the form field, not disable it ;)
    – Lodder
    Commented May 15, 2015 at 13:19
  • Yeah!! I missed "disabled" word here. Nevertheless, for the googlers this answer can be useful in certain case ;) Commented May 15, 2015 at 13:33
  • Hi, unfortunately this does not work if the field, which should be hidden, has a "multiple"="true"-tag :-(
    – MyFault
    Commented May 15, 2015 at 14:30
  • You can look at @Lodder answer. I'm agree with his answer and it is the actual way to deal with your issue. Commented May 15, 2015 at 14:32

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:


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

  • Hi and thank you very much for your answer. At the moment I got the following HTML-declaration for my fields (generated out of my form.xml): codepad.org/RdA9njdr. Unfortunately this does not work: codepad.org/BBB9D3DT - I'm getting no error on the error-console.
    – MyFault
    Commented May 15, 2015 at 12:30
  • When the page in your browser and inspect the input element to get the correct ID
    – Lodder
    Commented May 15, 2015 at 13:48
  • Hi @Lodder, the input is the following (d.pr/n/1gg8G) - but there are in fact more input fields - one for each value (jform_choose0 and jform_choose1).
    – MyFault
    Commented May 15, 2015 at 14:18
  • It appears you're using numbers in your ID's as well as A-Z characters. So try jform_choose0 and jform_choose0 as the ID's in your jQuery code. I've updated my answer fr you
    – Lodder
    Commented May 15, 2015 at 14:24
  • HI Lodder, thanks again :-) the thing is: choose0 and choose1 are the elements of the "selector" which is used to activate or deactivate the field "actions" (I illustrated this: d.pr/i/1hGgk ) So your code would deactivate choose1, which is the "Ja" (Yes)-Field of the selector.
    – MyFault
    Commented May 15, 2015 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.