$('elementname').disabled=true does not work in Chrome

teoyh · Oct 24, 2016

I just realised this today, that when I use $('elementname').disabled=true to disable an element in the form it will not work in Chrome. It appear grey out but user still able to make changes to the field element.

Does anyone have this similar experience.

Am I doing it right to use $('elementname').disabled=true in javascript to disable an element.

cheesegrits · Oct 25, 2016

Am I doing it right to use $('elementname').disabled=true in javascript to disable an element.

Nope. There's a difference between "disable" and "readonly":

http://stackoverflow.com/questions/...isabled-disabled-and-readonly-readonly-for-ht

Typically you want to use 'readonly', so the value gets submitted with the form.

And the way to set and unset properties is ...

Code:

jQuery('#yourtable___yourelement').prop('readonly', true)

Don't use the $() shorthand as this can be ambiguous in J!.

Use the prop() method, don't try and access attributes directly. You can also use the attr() method, if you want to know the difference, you can wade through ...

http://stackoverflow.com/questions/5874652/prop-vs-attr

-- hugh

teoyh · Oct 26, 2016

Thank you for your reply. The reason why i did not use the readonly in the early version of Fabrik is because even if i set to read only somehow the element on the form appear to be able to change and get updated. I therefore switch to using disable but doing that when the user hit the submit button i had to re-enable all those field which i disabled else those value will become blank. Perhaps its time for me to consider trying readonly.

teoyh · Oct 26, 2016

cheesegrits said:
Nope. There's a difference between "disable" and "readonly":

http://stackoverflow.com/questions/...isabled-disabled-and-readonly-readonly-for-ht

Typically you want to use 'readonly', so the value gets submitted with the form.

And the way to set and unset properties is ...

Code:

jQuery('#yourtable___yourelement').prop('readonly', true)

Don't use the $() shorthand as this can be ambiguous in J!.

Use the prop() method, don't try and access attributes directly. You can also use the attr() method, if you want to know the difference, you can wade through ...

http://stackoverflow.com/questions/5874652/prop-vs-attr

-- hugh

Ok I had tested and it seem that the following ;
jQuery('#yourtable___yourelement').prop('readonly', true) is only applicable to field element. It work consistently in all browser. I can set the field element to read only and when i submit the form the original value was maintained.

But when it come to dropdown element this code will not work jQuery('#yourtable___yourelement').prop('readonly', true)

I did a search in google it seem that it is recommending the following ;
$('#yourselectid').attr("disabled",true);

So is there no other mean to set the dropdown element to readonly. Because if i set to disabled i need to enable the element before save else the previous value in the dropdown will be destroyed.

cheesegrits · Oct 26, 2016

Ok I had tested and it seem that the following ;
jQuery('#yourtable___yourelement').prop('readonly', true) is only applicable to field element.

Ah, well, you specifically said "field element" in your post, so I assumed you meant field elements.

For select (dropdown) elements, the only way to make them "read only" and still have the selected value submitted is to individually set all but the selected option to be disabled, rather than disabling the select itself, which is easy to do with the handy dandy option::not() pseudo selector:

Code:

jQuery('#yourtable___yourelement option:not(:selected)').attr('disabled',true);

-- hugh

teoyh · Oct 27, 2016

cheesegrits said:
Ah, well, you specifically said "field element" in your post, so I assumed you meant field elements.

For select (dropdown) elements, the only way to make them "read only" and still have the selected value submitted is to individually set all but the selected option to be disabled, rather than disabling the select itself, which is easy to do with the handy dandy option::not() pseudo selector:

Code:

jQuery('#yourtable___yourelement option:not(:selected)').attr('disabled',true);

-- hugh

Wow I luv it, it so cool.

I tested the following , work flawlessly in IE and Chrome

Textbox jQuery('#xxx).prop('readonly', true);
Dropdown jQuery('#xxx option:not

selected)').attr('disabled',true);
Radio Button jQuery('#xxx input:radio').attr('disabled',true);

But for checkbox I cannot find a mean to do it. Any clue

cheesegrits · Oct 27, 2016

Code:

jQuery('#yourtable___yourelement input:checkbox:not(:checked)').prop('disabled', true)

-- hugh

teoyh · Oct 28, 2016

Is there any where that i can get hold of all the parameters that relate to fabrik elements eg fileupload , databasejoin, etc

Thanks for the reply, i will try it out.

cheesegrits · Oct 28, 2016

What do you mean by "parameters"?

If you mean the actual "params" in a Joomla settings sense, the plugin XML files, in ./plugins/fabrik_element/<whatever>/forms/fields.xml give you all the params.

-- hugh

teoyh · Oct 29, 2016

cheesegrits said:
What do you mean by "parameters"?

If you mean the actual "params" in a Joomla settings sense, the plugin XML files, in ./plugins/fabrik_element/<whatever>/forms/fields.xml give you all the params.

-- hugh

Oops i think i am using the wrong term again

Again let me try again ;
In Fabrik there are various elements in the form. There will be time in which the form will include fields, dropdown, databasejoin, radio box, checkbox, fileupload etc. Therefore what will be the method to set it to readonly such that when the user open up the form whatever he is not suppose to update i will set it to read only.

So far you had so kindly provide me the following ;
1.fields
jQuery('#yourtable___yourelemen).prop('readonly', true);
2.Dropdown
jQuery('#yourtable___yourelement option:not

selected)').attr('disabled',true);
3.Radio Button
jQuery('#yourtable___yourelemen input:radio').attr('disabled',true);
4. Checkbox
jQuery('#yourtable___yourelement input:checkbox:not

checked)').prop('disabled', true)

Will method 1 be applicable to upload element
also method 2 for database join

Thank you once again

cheesegrits · Oct 31, 2016

You can either write a wrapper to figure out what input type a given element is, or use the element FX onLoad and do which one is applicable to that element.

For file uploads, you'll have to select by name rather than ID:

Code:

jQuery('[name="yourtable___yourelement"]').prop('disabled', true)

For database joins it depends what type they are - dropdown, radio, checkbox or autocomplete(field).

-- hugh

teoyh · Oct 31, 2016

Noted with thanks

teoyh · Nov 1, 2016

Sorry I think I have an issue with the radio button. This radio button which I am talking about is not the database joins type but pure radio button. I use the following code ;
jQuery('#yourtable___yourelement input:radio').attr('disabled',true);
On the form it appear to be disabled no issue but the issue come when I submit and safe the form. The value got destroy.
Can please help to correct my code , thank you.

cheesegrits · Nov 1, 2016

Well, you'll need to do the exactly the same thing for radios as for checkboxes, and only disable ones which aren't checked.

Code:

jQuery('#yourtable___yourelement input:radio:not(:checked)').attr('disabled', true)

-- hugh

teoyh · Nov 2, 2016

What about for YesNo element , I inspect the element its reported and it show as follow ;

<input name="matrix_review___trreq[]" disabled="disabled" class="fabrikinput " type="radio" value="1" fabchecked="1">

But when I try to apply this code jQuery('#yourtable___yourelement input:radio:not

checked)').attr('disabled', true) it did not appear to work.

Thank you so much for all your reply.

cheesegrits · Nov 2, 2016

Hmmm.

The YesNo element uses Bootstrap button groups, which hide the actual radio button, and style the label as the green and red buttons. Which means you'll have to select the 'btn' class, that doesn't have the 'active' class, and add the Bootstrap 'disabled' class. And, as per the second answer here ...

http://stackoverflow.com/questions/29331261/disable-radio-button-in-bootstrap-3

... because there is a bug in earlier versions of Bootstrap, and buttons with the 'disabled' class still accept mouse clicks, you'll also have to add the CSS pointer-events=none attribute ...

Code:

jQuery('#fab_main_test___yes_no .btn').not('.active').addClass('disabled').css('pointer-events','none');

-- hugh

teoyh · Nov 7, 2016

Thank you for your reply i had done extensive test on most of the elements we had discussed so far;

Code:

function DisableElement(estr){
    var myarray = estr.split(',');
    for(var i = 0; i < myarray.length; i++){
        estrdata = myarray[i];
        for(j=0; j<document.form_264.elements.length; j++){
                etype = document.form_264.elements[j].type;
                if(etype){//etype is no null undefined NaN empty string ("") 0 false
                    ename = document.form_264.elements[j].name;
                    if(ename.indexOf(estrdata)>=0){
                        if(etype=='text'||etype=='textarea'){jQuery('#'+estrdata).prop('readonly', true);}
                        else if(etype=='select-one'){jQuery('#'+estrdata+' option:not(:selected)').attr('disabled',true);}
                        else if(etype=='file'){jQuery('[name="'+estrdata+'"]').prop('disabled', true);}
                        else if(etype=='radio'){
                            if(estrdata=='test_table___test7'){
                                jQuery('#'+estrdata+' .btn').not('.active').addClass('disabled').css('pointer-events','none');
                            }else{
                                jQuery('#'+estrdata+' input:radio:not(:checked)').attr('disabled', true);
                            }
                        }
                        else if(etype=='checkbox'){jQuery('#'+estrdata+' input:checkbox:not(:checked)').prop('disabled', true);}
                        break;
                    }
                }
                       
        }
    }
}

I had check IE, Firefox, Chrome, and Safrari all have no issue to use the above . The only problem i had is with plugin date element. The date element, seem to have 2 parts, the icon to click to select the date and an input field to allow user to manually input the date by typing. Although the type return by the date show text i am not able to disable the date element with any of the above. Kindly advise, thank you.

cheesegrits · Nov 8, 2016

You'll have to disable the input box and the button separately ...

Code:

jQuery('#date_test___slash_date input:text').prop('readonly', true);
jQuery('#date_test___slash_date button').prop('readonly', true);

-- hugh

teoyh · Nov 8, 2016

Ok noted with thanks

teoyh · Nov 17, 2016

Hi, may i know how do i re-enable after i disable with the following ;
jQuery('#leave_record___enddate .btn').not('.active').addClass('disabled').css('pointer-events','none');

Thank you

$('elementname').disabled=true does not work in Chrome

Member

Support Gopher

Member

Member

Support Gopher

Member

Support Gopher

Member

Support Gopher

Member

Support Gopher

Member

Member

Support Gopher

Member

Support Gopher

Member

Support Gopher

Member

Member

Useful links