0

I'm trying to show/hide fields on a SP2016 classic on-Prem Form. I have 4 checkbox (ChBx1 to 4) hiding/showing their own text field (ChBx Text), but there's one text field (ChBx Text All) common to those 4, that they have to hide or show. Of course, if 2 or more of the checkboxes are ticked, this textfield must stay visible until the last checkbox is unchecked. My JS Code is like this :

<script type="text/javascript">
$(document).ready(function(){
    $('nobr:contains("Chbx1 Text 1")').closest('tr').hide(); 
    $('nobr:contains("ChBx1 Text 2")').closest('tr').hide(); 
    $('nobr:contains("ChBx2 Text")').closest('tr').hide(); 
    $('nobr:contains("ChBx3 Text")').closest('tr').hide(); 
    $('nobr:contains("ChBx4 Text")').closest('tr').hide(); 
    $('nobr:contains("All ChBx Text")').closest('tr').hide(); 

    $("input[title='ChBx1']").bind('click',function() {
    if($(this).is(":checked"))
    {
     $('nobr:contains("ChBx1 Texte 1")').closest('tr').show();
     $('nobr:contains("ChBx1 Texte 2")').closest('tr').show();
     if(!('nobr:contains("All ChBx Text")').is(":visible"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }
    else
    {
     $y('nobr:contains("ChBx1 Text 1")').closest('tr').hide();
     $y('nobr:contains("ChBx1 Text 2")').closest('tr').hide();
     if($('nobr:contains("ChBx2")').prop("checked") || $('nobr:contains("ChBx3")').prop("checked") || $('nobr:contains("ChBx4")').prop("checked"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }  
    });
    $("input[title='ChBx2']").bind('click',function() {
    if($(this).prop("checked"))
    {
     $('nobr:contains("ChBx2 Text")').closest('tr').show();
     if($('nobr:contains("All ChBx Text")').is(":hidden"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }
    else
    {
     $('nobr:contains("ChBx2 Text")').closest('tr').hide();
     if($('nobr:contains("ChBx1")').prop("checked") || $('nobr:contains("ChBx3)').prop("checked") || $('nobr:contains("ChBx4")').prop("checked"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }  
    });
    $("input[title='ChBx3']").bind('click',function() {
    if($(this).prop("checked"))
    {
     $('nobr:contains("ChBx3 Text")').closest('tr').show();
     if($('nobr:contains("All ChBx Text")').is(":hidden"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }
    else
    {
     $('nobr:contains("ChBx3 Case")').closest('tr').hide();
     if($('nobr:contains("ChBx1")').prop("checked") || $('nobr:contains("ChBx2")').prop("checked") || $('nobr:contains("ChBx4")').prop("checked"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }  
    });
    $("input[title='ChBx4']").bind('click',function() {
    if($(this).prop("checked"))
    {
     $('nobr:contains("ChBx4 Text")').closest('tr').show();
     if($('nobr:contains("All ChBx Text")').is(":hidden"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }
    else
    {
     $('nobr:contains("ChBx4 Text")').closest('tr').hide();
     if($('nobr:contains("ChBx1")').prop("checked") || $('nobr:contains("ChBx2")').prop("checked") || $('nobr:contains("ChBx3")').prop("checked"))
     {
       $('nobr:contains("All ChBx Text")').closest('tr').show();
     }
    }  
    });
});

Hiding and showing each form field works. But for the ChBx Text All it doesn't work, as it's hiding at every uncheck, not even controlling if there's another checkbox ticked. I tried to view the prop() value and it always show 'undefined'. Si I also tried is(":checked") but the value always return false (even after a single checkbox is ticked) I also tried to use on("change") rather than bind("click") but that does not work either.

Has someone an idea ? Is there a problem on Sharepoint Forms having real time values of elements ?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.