This function expects 2 parameters.
First, an array of fields. Second, a boolean value that represent if you want readonly or not. For lookup and/or date fields, buttons are hided.
The function
Code: Select all
function setReadOnlyFields(array_field_selector, state){
var arrayLength = array_field_selector.length;
style = state ? 'cursor: not-allowed; background-color: #EEE;' : '';
for (var i = 0; i < arrayLength; i++) {
var $field = $j('#'+array_field_selector[i]);
if ($j('#'+array_field_selector[i]+'-container').length != 0) {
// It's a dropdown field
$j('#'+array_field_selector[i]+'-container').select2('enable', !state);
$j('#'+array_field_selector[i]+'-container').parent().find('button').toggle();
} else if ($j('#'+array_field_selector[i]).parents('.form-group').find('.date_combo').length) {
// It's a date field
$j('#'+array_field_selector[i]).parents('.form-group').find('.date_combo').find('select').each(function(){
$j(this).prop('readonly', state);
$j(this).prop('tabIndex', state ? -1 : 0);
$j(this).prop('style', style);
if (state) $j(this).mousedown(function(){return false;});
else $j(this).off( "mousedown" );
});
$j('#'+array_field_selector[i]).parents('.form-group').find('button').toggle();
} else {
$j('#'+array_field_selector[i]).prop('readonly', state);
$j('#'+array_field_selector[i]).prop('style', style);
if (state) {
$j('#'+array_field_selector[i]).prop('tabIndex', -1);
$j('#'+array_field_selector[i]).mousedown(function(){
return false;
});
} else {
$j('#'+array_field_selector[i]).prop('tabIndex', 0);
$j('#'+array_field_selector[i]).off( "mousedown");
}
}
}
}
FIrst, add declaration of this function somewhere (remember this is JS). I have my own api.js with common functions.
Now, you can call this function when needed. Simple example.
tablename-dv.js magic file
Code: Select all
$j(function(){
var myfields = ["field1", "field2"];
$j('#field3').on('change', function(){
setReadOnlyFields(myfields, false);
});
setReadOnlyFields(myfields, true);
});
Function is tested with date, lookups and text fields.