如何使用jQuery永久禁用复选框

Question

I have a website with three checkbox on it, when I click on any of the checkbox it will disable.

So if I click on the first checkbox it will disable or if I click on the first and second checkbox, if I click the second checkbox and the third checkbox it will also disable but when I refresh the page it goes back to being the default checkbox not disabled

here's my code

 $( "input[type='checkbox']").click(function(event){ $(this).attr('disabled', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='checkbox' value='testing one'/> <input type='checkbox' value='testing two'/> <input type='checkbox' value='testing three'/> 

thank you

Answer 1

Using javascript and jQuery only, you can store the data on localStorage

Here is an example:

//Get localStorage data 
var check = JSON.parse(localStorage.getItem('check')) || [];

//Disable all checkbox that is found on localStorage 
check.forEach(function(v) {
  $("input[value='" + v + "']").attr('disabled', true).prop('checked',true);
})

//Add event listener
$("input[type='checkbox']").click(function(event) {
  check.push($(this).val());                            //Push the value to the array
  localStorage.setItem('check', JSON.stringify(check)); //Save the array to localStorage 
  $(this).attr('disabled', true);                       //Disable the clicked checkbox
});

Here is a fiddle: https://jsfiddle.net/9js97xgt/

Answer 2

您可以使用localStorage，如果您不清理浏览器缓存，数据将永远保存在您的计算机上

Answer 3

Save the disabled checkboxes' indicies in localStorage, and then on page load, disable those indicies.

 const disabledIndicies = JSON.parse(localStorage.disabledIndicies || '[]'); document.querySelectorAll("input[type='checkbox']") .forEach((input, i) => { if (disabledIndicies.includes(i)) { input.disabled = true; return; } input.addEventListener('click', () => { console.log(input.value); input.disabled = true; disabledIndicies.push(i); localStorage.disabledIndicies = JSON.stringify(disabledIndicies); }); }); 

 <input type='checkbox' value='testing one'/> <input type='checkbox' value='testing two'/> <input type='checkbox' value='testing three'/> <input type='checkbox' value='testing 4'/> <input type='checkbox' value='testing 5'/> <input type='checkbox' value='testing 6'/> 

Due to SO sandboxing, it won't work in the snippet, but you can see a working example here:

https://jsfiddle.net/zd9yhas5/