0

I have a document library in SharePoint 2016 on-prem.

The document library has a content type with columns that the user needs to complete when the user uploads a document. Since you cannot edit the document library form in InfoPath, I created a custom form based on the "editform.aspx" using SharePoint designer.

I opened my new custom form in advanced mode and inserted the JavaScript. The form needs to have cascading dropdowns (which work perfectly) and auto check/uncheck multiple checkboxes based on the parent checkbox (select all functionality).

I am using jQuery 3.4.1.min.js. Please see code below. I tried so many different ways, I could not get the checkboxes to check/uncheck automatically when the parent is checked. Your assistance will be highly appreciated.

<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$().SPServices.SPCascadeDropdowns({
relationshipList: "disciplinessub",
relationshipListParentColumn: "discipline",
relationshipListChildColumn: "Title",
parentColumn: "Discipline",
childColumn: "Sub discipline",
debug: true
}); 
}); 

$(document).ready(function () {
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl00').on('change', function () {
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl01').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl02').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl03').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl04').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl05').prop('checked', this.checked);
});
});
</script>

enter image description here

0

Unfortunately, it's a old problem in SharePoint OnPremises: a web page lifecycle delay. But, you can work around encapsulate your routine into setTimeout; this will be like this:

$(document).ready(function (){
   setTimeout(function(){
     $().SPServices.SPCascadeDropdowns({
        relationshipList: "disciplinessub",
        relationshipListParentColumn: "discipline",
        relationshipListChildColumn: "Title",
        parentColumn: "Discipline",
        childColumn: "Sub discipline",
        debug: true
     });
     $('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl00').on('change', 
         function () {
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl01').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl02').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl03').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl04').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl05').prop('checked', this.checked);
});
   }); 
   }, 1000);
});

Or you can try another SharePoint JS native approach, this is more assertive because the developer encapsulate the custom function into ExecuteOrDelayUntilScriptLoaded tha contains the real time delay interval:

$(document).ready(function (){
   SP.SOD.executeFunc("sp.js", "SP.ClientContext", sharePointReady);
   ExecuteOrDelayUntilScriptLoaded(function(){
     $().SPServices.SPCascadeDropdowns({
        relationshipList: "disciplinessub",
        relationshipListParentColumn: "discipline",
        relationshipListChildColumn: "Title",
        parentColumn: "Discipline",
        childColumn: "Sub discipline",
        debug: true
     });
     $('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl00').on('change', 
         function () {
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl01').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl02').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl03').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl04').prop('checked', this.checked);
$('ctl00_ctl40_g_7a0cef3a_e14b_4ebe_80e8_b0c0c7b05b47_ff11_ctl00_ctl05').prop('checked', this.checked);
});
   }); 
   }, "https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.js");
});
0

I did more research, got a sample code and made a few changes to suit my requirements. Everything is working as expected now. Here is the code below.

$(document).ready(function () {
$("input[type='checkbox']").click(function () {
var chkMychekbox = $(this).is(":checked");
if($(this).next('label').text()=="Group")
{
if (chkMychekbox == true)
 {
$("input[type='checkbox']").each(function (i, item) {
$(this).prop("checked", true);
if($(this).next('label').text()!="Group")
{
$(this).prop("disabled", true);
}
});
 }
else
{
$("input[type='checkbox']").each(function (i, item) {
$(this).prop("checked", false);
$(this).prop("disabled", false);
});
}
}
});
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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