0

I have a button and I want to do the following

  • Disable this button by clicking on the checkbox that refers to it
  • Keep it disabled even after refreshing the page
  • Do the same, but instead. The button is disabled and now I would like to enable it again by clicking on the checkbox that references it keeping it that way after refreshing the page

I found two references that do exactly what I need, but I don't know how to put the two solutions together. This and this

HTML code

<div id="billing">
    <input type="checkbox" id="billing-checkbox" checked>
    <input type="button" value="Hello Javascript!">
</div>

Javascript code

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('billing-checkbox').onchange = toggleBilling;
    }, false);

    function toggleBilling() {
    var billingItems = document.querySelectorAll('#billing input[type="button"]');

    for (var i = 0; i < billingItems.length; i++) {
        billingItems[i].disabled = !billingItems[i].disabled;
    }
    }

    $(function(){
        var test = localStorage.input === 'true'? true: false;
        $('input').prop('checked', test || false);
    });

    $('input').on('change', function() {
        localStorage.input = $(this).is(':checked');
        console.log($(this).is(':checked'));
    });

Thank you so much!

M. Bran
  • 21
  • 5

1 Answers1

1

This will give a script error in the snippet, probably because it is a sandbox and doesn't allow for localStorage. But this is tested and works. See comments in the code for explanations. You can set the checkbox on or off and when you refresh the page, it will 'remember' it's state

$(document).ready(function() {
  // first thing is to set the checkbox based on the localStorage key that we may have set in the past
  $('#billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");

  // then we run our toggle billing
  toggleBilling()

  // we set up our change handler. 
  $('#billing-checkbox').on('change', toggleBilling);
});

function toggleBilling(e) {
  // we set the disabled based on the check button status
  $('#billing input[type="button"]').attr('disabled', !$('#billing-checkbox').prop('checked'))

  // we set the localStorage based on the button disabled
  localStorage.setItem('buttonDisabled', $('#billing input[type="button"]').attr('disabled'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="billing">
  <input type="checkbox" id="billing-checkbox" checked>
  <input type="button" value="Hello Javascript!">
</div>
Kinglish
  • 23,358
  • 3
  • 22
  • 43
  • Worked perfectly! Thank you. I still can't vote for your answer because I created my account today, but as soon as I get it I'll come back here and do it. – M. Bran Jun 18 '21 at 20:20
  • Thanks. I think you can accept the answer (just not upvote it yet due to not enough 'reputation') - just click on the little checkmark on the left of the answer (unless I'm mistaken) - https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Kinglish Jun 18 '21 at 20:26