angularjs: disable radio button whilst not actually disabling it

Question

I need to disable a radio button but still be able to tab through it. It seems that actually setting it to disabled takes it out of the tab rotation.

I have therefore done the following:

<input type="radio" class="appear-disabled" ng-keypress="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes">&nbsp;Yes&nbsp;
<input type="radio" class="appear-disabled" ng-keypress="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No">&nbsp;No&nbsp;

.appear-disabled {
 opacity: .5;
 pointer-events: none;
}

$scope.suppressKeyboard = function(event) {
 var keyCode = event.keyCode;

 // 32 = space, 13 = enter
 if (keyCode == 13 || keyCode == 32) {
   event.preventDefault ? event.preventDefault() : (event.returnValue = false);
 }
};

This makes the radio group appear (visually) to be disabled and prevents mouse clicks on the radio buttons but does not prevent tabbing onto a radio button and hitting space or enter to toggle it.

Why is the suppressKeyboard function not preventing the keyboard inputs?

the css disables the mouse click interactions. I need to disable the keyboard interactions as well. — Lurk21
– Lurk21, Commented Aug 8, 2017 at 22:06
Check if with the modifications in the answer satisfy the use-case. — Jesus Carrasco
– Jesus Carrasco, Commented Aug 9, 2017 at 5:00

Jesus Carrasco · Accepted Answer · 2017-08-08 22:18:20Z

Try change ng-keypress to ng-keydown and in the function do this:

HTML

<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedData === 'Y'" aria-label="Yes">&nbsp;Yes&nbsp;
<input type="radio" class="appear-disabled" ng-keydown="suppressKeyboard($event)" name="contestedDataNo" ng-model= REDACTED.contestedData ng-value="'N'" ng-checked="REDACTED.contestedData === 'N'" aria-label="No">&nbsp;No&nbsp;

CONTROLLER

$scope.suppressKeyboard = function(event) {
    var keyCode = event.keyCode;
    // 32 = space, 13 = enter

    if (keyCode == 13 || keyCode == 32) {
       //event.preventDefault ? event.preventDefault() : (event.returnValue = 
       false);
      event.preventDefault();
     }
 };

keydown -> can be prevented -> fired when: press a key
keypress -> can be prevented -> fired when: hold a key
keyup -> can not be prevented -> fired when: release a key

Collectives™ on Stack Overflow

angularjs: disable radio button whilst not actually disabling it

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related