angularjs “disabled”是锚标记的有效属性吗

3gtaxfhh  于 2023-10-15  发布在  Angular
关注(0)|答案(7)|浏览(161)

如果我有以下简单的代码段:

<div ng-app="myApp">
    <a ng-disabled='true' ng-click="value1=123">click me</a>
    <button ng-disabled='true' ng-click="value2=123">click me</button>
    =={{value1}}==
    =={{value2}}==
</div>

从小提琴上可以看到:http://jsfiddle.net/basarat/czVPG/按钮是不可点击的,ng-click(这只是一个jquery on('click',function(){}))不执行。但是,它会为锚标记执行。

  • 是因为disabled不是锚标记的有效属性吗?
  • 如果是的话,为什么它仍然会触发dom click事件,而按钮却不会?
aydmsdu9

aydmsdu91#

读取w3c Link和-a-元素
disable对锚标记无效
你可以通过event.preventDefault()来实现

$('a').click(function(event){
   event.preventDefault();
});
llew8vvj

llew8vvj2#

Disabled不是锚标记的有效属性。来源:http://dev.w3.org/html5/html-author/#the-a-element

mi7gmzs6

mi7gmzs63#

如果你不想使用JavaScript来禁用锚(就像在其他响应中提出的那样),你可以只省略href属性,锚就不会工作,甚至会改变它的样式。

<a>A disabled anchor</a>

注意:我知道我的回答没有直接讨论disable属性,但这些信息可能对听众有用,就像对我一样。

6ss1mwsb

6ss1mwsb4#

不,它不适用于a标记,您可以使用jquery event.preventDefault()referance here

jdgnovmf

jdgnovmf5#

按钮是一个输入类型,这就是为什么禁用工作。两个人的工作原理不一样。试着给你的a标签一个id并禁用JavaScript。

<div ng-app="myApp">
<a id="someid" ng-click="value1=123" >click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==</div>

之后可以使用js禁用元素,它应该像输入类型一样工作。

function DisableButton() {
    var submitButton = document.getElementById("someid");
    if (submitButton != null) {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

确保您获得了元素的正确客户端ID。

utugiqy6

utugiqy66#

如果以后要启用锚,那么在您实际上想要禁用它时删除href或将其设置为“#”是一种痛苦,因为您需要将href重置为它应该链接到的任何值。相反,我只是向标记添加了一个disable属性、一个click事件处理程序和一些css。这样,可以很容易地看到锚被禁用,但如果启用,它将去哪里。
是的,disabled是锚标签不支持的属性,但是CSS属性选择器可以找到它,jQuery也可以。因此,虽然下面的解决方案是一个混合的jQuery/javaScipt/CSS,它确实提供了一个更好的方式来禁用/启用锚,它支持动态添加/删除禁用属性到标记JavaScript/从标记。请注意,这只是经过测试,并发现在Chrome中工作。

<style>
  a:disabled,               /* This doesn't do anything, but hopefully one day ... */
  a[disabled]               /* This activates when the disabled attribute is added. */
    {
      cursor: not-allowed;  /* Indicate that the link is not to be click! */
    }
</style>

<script>
  // Use the same css selectors to find all of the disabled anchors ...

  $( 'a:disabled, a[disabled]' )
  .click( function( event ) {

            //
            // Prevent disabled anchors from doing their click action ...
            //
            // Need to recheck that the anchor is still disabled, because the
            // jQuery that initially found this anchor and set this event
            // handler doesn't affect the anchor after the event is set.
            //

            // Is this anchor still disabled?

            if( this.hasAttribute( 'disabled' ) ) {

              event.preventDefault();

            }

          } );
</script>

下面是一个codePen演示:https://codepen.io/howardb1/pen/XWrEKzP

mnowg1ta

mnowg1ta7#

很遗憾不可能。
另一个不错的选择是使用CSS!在那个被禁用的链接上打一个班!

.disabled {
  // Prevent element being interactive / the target of pointer events.
  pointer-events: 'none';

  // Additional styles to make it 'look' disabled below
  opacity: 0.5;
}

More on CSS Pointer events here (MDN Web Docs)

相关问题