1

Since I don't have enough points to leave a comment, I must ask a question. The situation I'm referencing can be seen here LINK. And I promise that I've Googled for hours before posting a question.

I'm trying to be able to "toggle" HTML checkboxes to be readonly. Here is where I am so far.

  1. "DISABLED" is NOT an option. It won't post with the form.
  2. "READONLY" is NOT really readonly. It may gray-out, but it can still be clicked.
  3. The only thing that seems to work is what the LINK refers to and that is applying READONLY to the checkboxes and then some jQuery like: $(':checkbox[readonly=readonly]').click(function(){return false;}); or $(':checkbox[readonly=readonly]').click(function(){return true;});
    • I've also messed around with swapping classes in case there was something limiting about the readonly attribute.

THE PROBLEM is that whatever the first setting becomes (TRUE or FALSE) is what it stays like until the page is refreshed. I can't re-enable the checkboxes simply by running the other statement to return the opposite (FALSE or TRUE).

QUESTIONS

  1. Is there a way to be able to toggle the RETURN (TRUE or FALSE) for the .click event?
  2. Is there another alternative for toggling the ability to check the checkboxes?

Thanks a bunch.

Community
  • 1
  • 1
SeaBass
  • 464
  • 6
  • 13

2 Answers2

1

jsFiddle DEMO

If you want to toggle between return false; & return true; you could use .change() event & come up with a specific condition to toggle.

$(':checkbox[readonly=readonly]').change(function () {
    if($(this).is(':checked'))
        console.log("return false");
    else
        console.log("return true");
});
Venkata Krishna
  • 14,926
  • 5
  • 42
  • 56
  • Thanks for you response Krishna, but this isn't really what I'm asking. This solution returns a true/false value from a specific checkbox. It's the click event that needs to be disabled so the user can't check the checkbox. If you add the disabled attribute the checkbox won't post with the form and readonly doesn't do anything. – SeaBass Nov 01 '13 at 18:02
0

OK finally figured it out. I'll try to keep my points organized.

  1. Include jquery-ui.js, not sure why, but it needs it.
  2. Use a .change() event to add and remove two classes that designate READ/WRITE
  3. Use $('.ReadClass').bind('click',false); to prevent checking
  4. Use $('.ReadClass').unbind('click', false); AND switch the classes AND add $('.WriteClass').bind('click',true); to en-enabled checking

Here is a link to my jsFiddle demo. The demo loops through all specified form element to toggle the ability for the user to enter data.

Hope this helps somebody else.

SeaBass
  • 464
  • 6
  • 13