Javascript angularjs:禁用单选按钮,而不是实际禁用它
我需要禁用一个单选按钮,但仍然能够通过它的标签。实际上,似乎将其设置为禁用会使其脱离选项卡旋转 因此,我做了以下工作:Javascript angularjs:禁用单选按钮,而不是实际禁用它,javascript,angularjs,Javascript,Angularjs,我需要禁用一个单选按钮,但仍然能够通过它的标签。实际上,似乎将其设置为禁用会使其脱离选项卡旋转 因此,我做了以下工作: <input type="radio" class="appear-disabled" ng-keypress="suppressKeyboard($event)" name="contestedDataYes" ng-model= REDACTED.contestedData ng-value="'Y'" ng-checked="REDACTED.contestedDa
<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"> Yes
<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"> No
.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);
}
};
这会使单选组在视觉上显示为已禁用,并防止鼠标单击单选按钮,但不会阻止在单选按钮上单击Tab键并单击空格或enter键以切换单选按钮
为什么suppressKeyboard功能不阻止键盘输入?尝试将ng keypress更改为ng keydown,然后在功能中执行以下操作:
HTML
按键->可防止->在以下情况下触发:按键
按键->可防止->在:按住键时触发
按键->无法阻止->释放按键时触发
为什么不使用ng disabled?因为你不能在一个禁用的元素上使用tab键你只想使用click?css会禁用鼠标点击交互。我还需要禁用键盘交互。检查答案中的修改是否满足用例。
<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"> Yes
<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"> No
$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();
}
};