1

I have a multiselect checkbox with the value "Eric". When "Eric" is checked, it should show/hide a corresponding bootstrap element. The code is dynamic and works properly EXCEPT when the form is loaded. The list checkbox retains the check, BUT the bootstrap element appears unchanged. When someone opens the edits form, I'd like the bootstrap elements to reflect the checkbox values ON PAGE LOAD. Let me know if you need more info and thanks!

Screenshot with Current & Desired outcome

<!DOCTYPE html>
<html>
<head>
<!-- OOB Removal -->
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
</head>
<div class="card-group">
<div class="card text-center" style="width: 20rem;">
    <h3 class="card-header primary-color white-text">Assign To</h3>
    <div class="card-body">
        <h4 class="card-title">Click <i class="fa fa-plus"></i> to assign this Task</h4>
        <p class="card-text">From the list below, specify the team members assigned to this task. Click the ✖ to unassign team members to this task. Active assignees will appear in the 'Currently Assigned' field.</p>

        <div class="btn-group-vertical checkbox-container" id="checkbox-container-assigned" role="group" aria-label="Vertical button group">
            <div class="btn-group btn-group-sm btn-group-eric" role="group" aria-label="Eric Buttons">
                <button type="button" class="btn btn-elegant btn-sm btn-eric-check btn-checked" id="btnEric" onclick="checkEric()"><i class="fa fa-plus"></i> assign to Eric</button>
                <button type="button" class="btn btn-danger red accent-4 btn-sm btn-eric-uncheck btn-unchecked" id="btnEric" onclick="uncheckEric()"><i class="fa fa-close"></i> unassign eric</button>
        </div>
    </div>
  </div>
</div>


<div class="card text-center" style="width: 20rem;">
    <h3 class="card-header success-color white-text">Task Sign-off</h3>
    <div class="card-body">
        <h4 class="card-title">Click <i class="fa fa-check"></i> to sign-off on this Task</h4>
        <p class="card-text">'Signing-off' on a Task lets others know that you have confirmed that this task has been satisfied and confirms this task be automatically marked as 'Completed'.</p>

        <div class="btn-group-vertical checkbox-container" role="group" aria-label="Vertical button group">
<div class="btn-group btn-group-sm btn-group-ed" role="group" aria-label="ED Buttons">
    <button type="button" class="btn btn-elegant btn-sm btn-ed-check btn-checked" id="btnEd" onclick="checkEd()"><i class="fa fa-check"></i> eric sign-off</button>
<button type="button" class="btn btn-outline-danger waves-effect red-text btn-sm btn-ed-uncheck btn-unchecked" id="btnEd" onclick="uncheckEd()"><i class="fa fa-close"></i> undo eric sign-off</button>

    </div>
  </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    // document.addEventListener('DOMContentLoaded', function() { OPENING tag here here, replacing the function below
$(document).ready(function () { 
        $(".btn-ed-check").hide();
        $(".btn-ed-uncheck").hide();
        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btn-ed-check").hide();
            $(".btn-ed-uncheck").hide();

        }

        $(".btn-ed-uncheck").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btn-ed-check").show();
            $(".btn-ed-uncheck").hide();


        });
        $(".btn-ed-check").click(function(){
            sessionStorage.setItem("Show", "true");

            $(".btn-ed-check").hide();
            $(".btn-ed-uncheck").show();


        });

        $(".btn-eric-check").show();
        $(".btn-eric-uncheck").hide();
        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btn-eric-check").show();
            $(".btn-eric-uncheck").hide();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").hide();
        }

        $(".btn-eric-uncheck").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btn-eric-check").show();
            $(".btn-eric-uncheck").hide();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").hide();


        });
        $(".btn-eric-check").click(function(){
            sessionStorage.setItem("Show", "true");

            $(".btn-eric-check").hide();
            $(".btn-eric-uncheck").show();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").show();


        });
    });
// }, false); CLOSING tag here here, replacing the end tag above
</script>
<script type="text/javascript">
    // Is this script fine as it is?
        function checkEric() {
            var checkEric = $("label:contains('Eric')").siblings("input");
            if (!checkEric.prop('checked')) {
                checkEric.prop('checked', true);
            }
        }
        function uncheckEric() {
            var EricCheck = $("label:contains('Eric')").siblings("input");
            if (EricCheck.prop('checked')) {
                EricCheck.prop('checked', false);
            }
        }
         function checkEd() {
            var EdCheck = $("label:contains('ED')").siblings("input");
            if (!EdCheck.prop('checked')) {
                EdCheck.prop('checked', true);
            }
        }
        function uncheckEd() {
            var EdCheck = $("label:contains('ED')").siblings("input");
            if (EdCheck.prop('checked')) {
                EdCheck.prop('checked', false);
            }
        }
        </script>

<script type="text/javascript">
    // is this script fine as it is?
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });

  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// Is this script fine as it is? 
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});
</script>


<style>
.btn {
white-space: nowrap !important;
}

</style>
</body>
</html>
1

It would cause when the script is loaded before the content is loaded.

Load the script after the page content loaded using DOMContentLoaded or _spBodyOnLoadFunctionNames.push

<script>
document.addEventListener('DOMContentLoaded', function() {
   //check the "Eric" is checked or not
   //hide or show 
}, false);
</script>

Or:

<script language="javascript">  
    _spBodyOnLoadFunctionNames.push("StartFunction");   
    function StartFunction()   
    {   
       //check the "Eric" is checked or not
       //hide or show the corresponding bootstrap element
    }   
</script>

Update: Check the script below:

<script type="text/javascript">
$(document).ready(function () { 
        $(".btn-ed-check").hide();
        $(".btn-ed-uncheck").hide();
        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btn-ed-check").hide();
            $(".btn-ed-uncheck").hide();
}
$(".btn-ed-uncheck").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btn-ed-check").show();
            $(".btn-ed-uncheck").hide();
});
        $(".btn-ed-check").click(function(){
            sessionStorage.setItem("Show", "true");
$(".btn-ed-check").hide();
            $(".btn-ed-uncheck").show();
});
$(".btn-eric-check").show();
        $(".btn-eric-uncheck").hide();
        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btn-eric-check").show();
            $(".btn-eric-uncheck").hide();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").hide();
        }
$(".btn-eric-uncheck").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btn-eric-check").show();
            $(".btn-eric-uncheck").hide();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").hide();
});
        $(".btn-eric-check").click(function(){
            sessionStorage.setItem("Show", "true");
$(".btn-eric-check").hide();
            $(".btn-eric-uncheck").show();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").show();
});
    });

document.addEventListener('DOMContentLoaded', function() {
            var checkEric = $("label:contains('Eric')").siblings("input");
            if (checkEric.prop('checked')) {
                //Eric is checked
                //.btn-eric-check
                sessionStorage.setItem("Show", "true");
                $(".btn-eric-check").hide();
                $(".btn-eric-uncheck").show();
                $(".btn-ed-uncheck").hide();
                $(".btn-ed-check").show();
            }
}, false);

</script>

Add the script into your scripts:

<div class="card text-center" style="width: 20rem;">
    <h3 class="card-header success-color white-text">Task Sign-off</h3>
    <div class="card-body">
        <h4 class="card-title">Click <i class="fa fa-check"></i> to sign-off on this Task</h4>
        <p class="card-text">'Signing-off' on a Task lets others know that you have confirmed that this task has been satisfied and confirms this task be automatically marked as 'Completed'.</p>

        <div class="btn-group-vertical checkbox-container" role="group" aria-label="Vertical button group">
<div class="btn-group btn-group-sm btn-group-ed" role="group" aria-label="ED Buttons">
    <button type="button" class="btn btn-elegant btn-sm btn-ed-check btn-checked" id="btnEd" onclick="checkEd()"><i class="fa fa-check"></i> eric sign-off</button>
<button type="button" class="btn btn-outline-danger waves-effect red-text btn-sm btn-ed-uncheck btn-unchecked" id="btnEd" onclick="uncheckEd()"><i class="fa fa-close"></i> undo eric sign-off</button>

    </div>
  </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () { 
        $(".btn-ed-check").hide();
        $(".btn-ed-uncheck").hide();
        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btn-ed-check").hide();
            $(".btn-ed-uncheck").hide();

        }

        $(".btn-ed-uncheck").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btn-ed-check").show();
            $(".btn-ed-uncheck").hide();


        });
        $(".btn-ed-check").click(function(){
            sessionStorage.setItem("Show", "true");

            $(".btn-ed-check").hide();
            $(".btn-ed-uncheck").show();


        });

        $(".btn-eric-check").show();
        $(".btn-eric-uncheck").hide();
        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btn-eric-check").show();
            $(".btn-eric-uncheck").hide();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").hide();
        }

        $(".btn-eric-uncheck").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btn-eric-check").show();
            $(".btn-eric-uncheck").hide();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").hide();


        });
        $(".btn-eric-check").click(function(){
            sessionStorage.setItem("Show", "true");

            $(".btn-eric-check").hide();
            $(".btn-eric-uncheck").show();
            $(".btn-ed-uncheck").hide();
            $(".btn-ed-check").show();


        });
    });
document.addEventListener('DOMContentLoaded', function() {
            var checkEric = $("label:contains('Eric')").siblings("input");
            if (checkEric.prop('checked')) {
                //Eric is checked
                //.btn-eric-check
                sessionStorage.setItem("Show", "true");
                $(".btn-eric-check").hide();
                $(".btn-eric-uncheck").show();
                $(".btn-ed-uncheck").hide();
                $(".btn-ed-check").show();
            }
}, false);

</script>
<script type="text/javascript">
    // Is this script fine as it is?
        function checkEric() {
            var checkEric = $("label:contains('Eric')").siblings("input");
            if (!checkEric.prop('checked')) {
                checkEric.prop('checked', true);
            }
        }
        function uncheckEric() {
            var EricCheck = $("label:contains('Eric')").siblings("input");
            if (EricCheck.prop('checked')) {
                EricCheck.prop('checked', false);
            }
        }
         function checkEd() {
            var EdCheck = $("label:contains('ED')").siblings("input");
            if (!EdCheck.prop('checked')) {
                EdCheck.prop('checked', true);
            }
        }
        function uncheckEd() {
            var EdCheck = $("label:contains('ED')").siblings("input");
            if (EdCheck.prop('checked')) {
                EdCheck.prop('checked', false);
            }
        }
        </script>

<script type="text/javascript">
    // is this script fine as it is?
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });

  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// Is this script fine as it is? 
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});
</script>


<style>
.btn {
white-space: nowrap !important;
}

</style>
</body>
</html>
  • Thanks for the response. How would I implement your solution with my script? Do I wrap my existing script with _spBodyOnLoadFunctionNames.push("StartFunction"); ? – TheJDScott Dec 12 '18 at 14:42
  • No, you don't need to put all existing scripts within StartFunction function. In the StartFunction, you just need to check the "Eric" is checked or unchecked, show/hide the elements based on the "Eric" result after the page content loading. – JoannaW_MSFT Dec 13 '18 at 3:50
  • Joanna -- thanks for the help. I implemented your solution, but want to make sure I'm doing it correctly, as it didn't work (assuming it s a mistake on my end). I've amended the original script and put my questions in the comments – TheJDScott Dec 14 '18 at 17:02
  • 1
    Check my update – JoannaW_MSFT Dec 17 '18 at 2:43
  • Thank you. This gets me almost all the way there. The bs controls no longer change the checkbox value on click, however bs controls DO reflect the value of the checkbox on page load – TheJDScott Dec 17 '18 at 15:44

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.