locked
Multiple attributes = same value RRS feed

  • Question

  • User-1826049516 posted

    Hi,

    Is there shorter way of doing this:

    $( this ).attr( "disabled", $( this ).closest( "[data-personid]" ).data( "personid" ) === $( "#userInfo" ).data( "userid" ) ).prop( "disabled", $( this ).closest( "[data-personid]" ).data( "personid" ) === $( "#userInfo" ).data( "userid" ) )

    Basically this is in an .each() loop and it checks if the current element (anchor) in the loop has the same data-personid value as the current user. If so, the link should be disabled.

    The problem is, using only .attr() to set it to disabled does not actually disable it (can still click it), but you can style with CSS to make it appear greyed out. If you just use .prop() to disable it, it is really disabled (click has no action) but then CSS doesn't work for styling. How annoying!!!!

    a[disabled] {
    	pointer-events: none;
    }
    a[disabled] > img {
    	-webkit-filter: grayscale(100%);
    	filter: grayscale(100%);
    }
    

    This is for a corporate intranet.

    Wednesday, June 19, 2019 12:31 PM

Answers

  • User-474980206 posted

    css only looks at attributes. for properties the attribute sets the default value. values-less attributes like disabled, you add or remove the attribute. setting its values makes no difference:

      <a disabled="false">

     is still disabled. you must remove the attribute. adding the attribute will not update the property. you should be setting / removing the disabled attribute, and setting the prop

    // no loop required
    
    $("a[data-personid]")
       .removeAttr("disabled")
       .prop("disabled", false);
    $("a[data-personid" + "=" + $("#userInfo").data( "userid" ) + "]")
       .attr("disabled","disabled")
       .prop("disabled", true);
    



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 8:24 PM