0

I am using this plugin https://github.com/cdp1337/jquery.readonly to make a checkbox readonly. Functionality working fine.

Checkbox Advertiser ID is a readonly checkbox.

But, I needed to distinguish the readonly checkboxes from the normal ones, so I added the following css - 

.readonly_overlay{   background-color: #666;   opacity: 0.3;}

That worked fine too.

But, now the problem is in the case where the elements are movable/scrollable. See fiddle - See fiddle - http://jsfiddle.net/cr3fB/5/

Observe that when we scroll downwards, the readonly overlays move outside the blue borders of the box, over the "Outside Container" text.

What I am looking for

Any of these -

  • some further tweaks/fixes to the same plugin I am using (this plugin does not seem to be maintained anymore).

  • Some other plugins, which can make checkboxes, radiobuttons etc readonly (elements which cannot be made readonly in old HTML - less than HTML 5) while also distinguishing them from editable checkboxes.

Sandeepan Nath
  • 9,966
  • 17
  • 86
  • 144

2 Answers2

2

Dude if you know CSS then you don't need this plugin.

i guess you have given readonly class to all check-boxes that need to be displayed as read-only.

this CSS will solve your problem without plugin.

.readonly{   background-color: #666;   opacity: 0.3;pointer-events:none;}

Note pointer-events: none prevents all click, state and cursor options on the specified HTML element

see, the link Hope, this solves your problem.

Edit: As you said you are navigating using keyboard and make them check un-check using space-bar then add tabindex="-1". e.g. 

<input type="checkbox" class="readonly" tabindex="-1" value="yes" />

or use this little jQuery snippet.

$(".readonly").attr("tabindex","-1");

See this link.

lokeshjain2008
  • 1,879
  • 1
  • 22
  • 36
0

Set intervaltime to a low number. It defaults to 250. https://github.com/cdp1337/jquery.readonly#options

You should be able to pass the settings object to the constructor, but when I tried it, it didn't work. Changing the settings object directly isn't pretty, but it worked.

settings = {
    intervaltime: 10, // milliseconds between each "tick". If your application never moves elements, feel free to set this to really high.
    //keypress: function(e){if(e.keyCode == 9) return true; else return false;},
    overlayClass: 'readonly_overlay',
    title: '',
    zindex: 'auto', // Set this to a number to force a specific z-index.
    formtargets: 'input,select,textarea,button,a', // Any element which can be targetted.
    show: function (overlay) {
        overlay.show();
    },
    hide: function (overlay) {
        overlay.hide();
    },
    tick: function (overlay) {
        // Function that is fired on every "tick" of the window to ensure accurate position.
        return;
    },

    _dummy: false
};
Barbara Laird
  • 12,599
  • 2
  • 44
  • 57
  • The intervaltime setting controls the speed at which the position of the overlay is updated. That is one step better than the jsfiddle I attached, but still the problem of the overlay still displaying when its associated checkbox is no more visible (due to scrolling) does not get solved. You may see updated fiddle http://jsfiddle.net/cr3fB/6/. In the fiddle view, check by scrolling downwards to the end, you will find the overlay corresponding to the Advertiser Name row over the text "Outside Container". Hopefully I could explain my point. Let me know if you need any further details. Thanks btw – Sandeepan Nath Jun 17 '14 at 07:37
  • Yep, I see it also. We could add javascript to hack this further. But, I think lokeshjain's solution is much better. – Barbara Laird Jun 17 '14 at 21:46