How to add an onClick event to a Multi-Checkbox?

👨‍💻 Development Help
1

SuiteCRM Version 7.2.1

Sugar Version 6.5.20 (Build 1001)

Okay so to be clear here, I know how to add an onClick event to a checkbox, the problem is that I am unsure how to do this specifically within SugarCRM.

I have a Multi-Select field in SugarCRM. It needed to be a Multi-checkbox, but HTML fields within SugarCRM are “Read-only”. So I needed to edit the existing field and change it a Multi-checkbox. If found that answer here.

Well, now I have a multi-checkbox such as below with a “none” option. What I want now to happen is in the EditView, when a user clicks “none of the above”, all other options are disabled and un-checked.

Here is the normal code that’s generated for the HTML:

<p style="height: 200px; overflow: scroll; margin-bottom: 1.5em; width:30%" class="select">
<input type="hidden" id="typesoflicenses_c_multiselect" name="typesoflicenses_c_multiselect" value="true">
<label><input type="checkbox" name="typesoflicenses_c[]" value="1" id="typesoflicenses_c" title="">Life Insurance</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="2" id="typesoflicenses_c" title="">Securities</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="3" id="typesoflicenses_c" title="">CPA</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="4" id="typesoflicenses_c" title="">Attorney</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="5" id="typesoflicenses_c" title="">Mortgage Broker</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="6" id="typesoflicenses_c" title="">Real Estate</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="7" id="typesoflicenses_c" title="">Enroller</label><br>
<label><input type="checkbox" name="typesoflicenses_c[]" value="8" id="typesoflicenses_c" title="">None</label><br>
</p>

So I need to add an onclick function to the “none” option and call a function. My problem is:

A ) If I add a ‘customCode’ => option inside the editviewdefs.php file for that field, it will overwrite the entire field with whatever I put in there, and If I copy and paste the whole field html there, then nothing saves to the DetailView. I just simply want to append to the already existing html field.

B ) I am unsure of how to properly designate in my .js file all of these different options. Would the syntax look something like this?:

if ($("#typesoflicenses_c[4]").is(':checked')){
         //Disable checkboxes
           $("#typesoflicenses_c[1]").prop('disabled', true);
           $("#typesoflicenses_c[2]").prop('disabled', true);
           $("#typesoflicenses_c[3]").prop('disabled', true);
         //Un-Check all others
           $("#typesoflicenses_c[1]").prop('checked', false);
           $("#typesoflicenses_c[2]").prop('checked', false);
           $("#typesoflicenses_c[3]").prop('checked', false);

I’m just not 100% sure on how typesoflicenses_c[] is designated between all the options.

Here is also an article I read on modifying fields you’ve made changes too so that they retain there value in the detailview.

C ) Eventually I’d like to figure out how to add Tables and Radio Buttons that have “Other” options with textbox input, because I can’t add them through HTML because they are read-only.

2

I was able to figure out the javascript problem, now I just need to an the onclick event into the HTML. Which I can’t figure out.

Here is my javascript file:

//disable all other checkboxes if "none" is checked
function hideshowlicense(){ 

                                if (document.getElementsByName("typesoflicenses_c[]")[7].checked){
                                //Disable checkboxes
                                document.getElementsByName("typesoflicenses_c[]")[0].disabled=true;
                                document.getElementsByName("typesoflicenses_c[]")[1].disabled=true;
                                document.getElementsByName("typesoflicenses_c[]")[2].disabled=true;
                                document.getElementsByName("typesoflicenses_c[]")[3].disabled=true;
                                document.getElementsByName("typesoflicenses_c[]")[4].disabled=true;
                                document.getElementsByName("typesoflicenses_c[]")[5].disabled=true;
                                document.getElementsByName("typesoflicenses_c[]")[6].disabled=true;
                                //Uncheck any other checked options
                                document.getElementsByName("typesoflicenses_c[]")[0].checked=false;
                                document.getElementsByName("typesoflicenses_c[]")[1].checked=false;
                                document.getElementsByName("typesoflicenses_c[]")[2].checked=false;
                                document.getElementsByName("typesoflicenses_c[]")[3].checked=false;
                                document.getElementsByName("typesoflicenses_c[]")[4].checked=false;
                                document.getElementsByName("typesoflicenses_c[]")[5].checked=false;
                                document.getElementsByName("typesoflicenses_c[]")[6].checked=false;
                                }else{
                                document.getElementsByName("typesoflicenses_c[]")[0].disabled=false;
                                document.getElementsByName("typesoflicenses_c[]")[1].disabled=false;
                                document.getElementsByName("typesoflicenses_c[]")[2].disabled=false;
                                document.getElementsByName("typesoflicenses_c[]")[3].disabled=false;
                                document.getElementsByName("typesoflicenses_c[]")[4].disabled=false;
                                document.getElementsByName("typesoflicenses_c[]")[5].disabled=false;
                                document.getElementsByName("typesoflicenses_c[]")[6].disabled=false;
                                }

    }

    SUGAR.util.doWHEN("typeof($('#loa_c'))!= 'undefined'"), YAHOO.util.Event.addListener(YAHOO.util.Dom.get('loa_c'), 'change', dep);
    SUGAR.util.doWHEN("typeof($('#typesoflicenses_c'))!= 'undefined'"), YAHOO.util.Event.addListener(YAHOO.util.Dom.get('typesoflicenses_c'), 'change', hideshowlicense);

Right now I am getting an error in the chrome console that says: “Uncaught TypeError: SUGAR.util.doWHEN is not a function” and nothing is changed in the HTML. But if I pull up the same thing in firefox, no error is present, but still no change in the HTML.