I have a checkbox and text field besides it in the Accounts module.
I want to display text field when checkbox is checked 
and hide/disable text field when it is not checked.
How to achieve this in SuiteCRM 7.x versions? 
Thank you so much in an advance!
In V7 you can to this pretty easily with smarty templates. See my example on Conditional fields. You could make it “hidden” based on the condition.
Is this correct? Do I need to add this custom code under text field properties?
'customCode' => '{if $fields.work_c.value eq "1"}<input type="text" name="task_number_c" value="{$fields.task_number_c.value}" id="task_number_c" />{else}<input type="text" name="task_number_c" value="{$fields.task_number_c.value}" id="task_number_c" disabled="disabled" style="background-color: #e9ecef;" />{/if}',
Edit
I tried in the editviewdefs of Accounts module. It is not working as per requirement.
input type =“hidden” when you do not want to display it.
But it is not dynamic, you need to save record and again go to edit view.
Maybe I need to do it using vanilla JS code.
Suggested by AI:
custom/modules/Accounts/js/conditional_fields.js
// This script toggles the visibility of the text field based on the checkbox state
document.addEventListener('DOMContentLoaded', function() {
var checkboxField = document.querySelector('[name="checkbox_field"]');
var textField = document.querySelector('[name="text_field"]');
// Function to handle the toggle of the text field visibility
function toggleTextField() {
if (checkboxField.checked) {
textField.style.display = 'block'; // Show the text field
} else {
textField.style.display = 'none'; // Hide the text field
}
}
// Initialize the display state based on the checkbox status
toggleTextField();
// Add an event listener to the checkbox to update the text field visibility
checkboxField.addEventListener('change', toggleTextField);
});
Could you please try these steps:
function hideshow(){
var ckbox = document.getElementById('internal');
if(ckbox.checked){
document.getElementById('addFileButton').style.display='none';
document.querySelector("div[data-label='LBL_CASE_UPDATE_FORM']").style.display='none';
} else {
document.getElementById('addFileButton').style.display='block';
document.querySelector("div[data-label='LBL_CASE_UPDATE_FORM']").style.display='block';
}
}
'includes' =>
array(
0 =>
array(
'file' => 'custom/modules/Cases/js/jscript.js',
),
7 => array(
0 => array(
'name' => 'internal',
'displayParams' =>
array (
'field' =>
array (
'onchange' => 'hideshow();',
),
wait! It is confusing. I have fields like below in the editviewdefs.php file.
2 =>
array (
0 =>
array (
'name' => task_c',
'label' => 'LBL_TASK',
),
1 =>
array (
'name' => 'task_number_c',
'label' => 'LBL_TASK_NUMBER',
),
),
checkbox is task_c and text field is task_number_c
Now, how to do it? I tried to add that file parameter and js code file but it did not work for me.
Sorry about the confusion. Could you please replace your javascript function as
function hideshow(){
var ckbox = document.getElementById('task_c');
if(ckbox.checked){
document.getElementById('task_number_c').style.display='none';
document.querySelector("div[data-label='LBL_TASK_NUMBER']").style.display='none';
} else {
document.getElementById('task_number_c').style.display='block';
document.querySelector("div[data-label='LBL_TASK_NUMBER']").style.display='block';
}
}
and change fields’ definition as
2 =>
array (
0 =>
array (
'name' => task_c',
'label' => 'LBL_TASK',
'displayParams' =>
array (
'field' =>
array (
'onchange' => 'hideshow();',
),
),
1 =>
array (
'name' => 'task_number_c',
'label' => 'LBL_TASK_NUMBER',
),
)
Steps that I took: 
custom/modules/Cases/js/conditional_fields.js
function hideshow(){
var ckbox = document.getElementById('task_c');
if(ckbox.checked){
document.getElementById('task_number_c').style.display='none';
document.querySelector("div[data-label='LBL_TASK_NUMBER']").style.display='none';
} else {
document.getElementById('task_number_c').style.display='block';
document.querySelector("div[data-label='LBL_TASK_NUMBER']").style.display='block';
}
}
Then, added code in editviewdefs.php (added that missing ), closing bracket)
2 =>
array (
0 =>
array (
'name' => task_c',
'label' => 'LBL_TASK',
'displayParams' =>
array (
'field' =>
array (
'onchange' => 'hideshow();',
),
),
),
1 =>
array (
'name' => 'task_number_c',
'label' => 'LBL_TASK_NUMBER',
),
)
Then I did QR&R and hard reload and clear cache on the browser page.
I went to edit page of the module. The text field is still displaying. Then, I click on checkbox and I am getting the below error in the console. What am I doing wrong? 
Uncaught ReferenceError: hideshow is not defined
at HTMLInputElement.onchange
Please check this part in editviewdefs.php and change the file path.
‘includes’ =>
array(
0 =>
array(
‘file’ => ‘custom/modules/Cases/js/jscript.js’,
),
Awesome 
it is working!
I have one more question, can I do same with detail view and disable inline edit for those two fields.
Thanks. Can you please try setting inline edit false with the following for those two fields in detailviewdefs.php.
inline_edit’ => false,
Yes, that’s correct!
But, in the beginning I want to keep the below field hidden.
Is it type = ‘hidden’? How to hide it from the UI?
1 =>
array (
'name' => 'task_number_c',
'label' => 'LBL_TASK_NUMBER',
),
Can you please add the following code after hideshow() function in the JScript.js as show below. The checkbox is set checked and called hideshow() method.
$( document ).ready(function(){
document.getElementById('task_c').checked=true;
hideshow();
});
The JS code should look something like
Awesome! It worked
