diff --git a/src/app/app.scss b/src/app/app.scss
index 6019015fe..4ef93f97c 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -101,6 +101,11 @@ ion-app.app-root {
     opacity: 0.71;
   }
 
+  // Simulate item[disabled] but keeping pointer-events.
+  .item-disabled {
+    opacity: .4;
+  }
+
   .item-radio-checked {
     background-color: $gray-lighter;
   }
diff --git a/src/core/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/courses/components/course-list-item/core-courses-course-list-item.html
index d37534d63..a56a02b9b 100644
--- a/src/core/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/courses/components/course-list-item/core-courses-course-list-item.html
@@ -1,4 +1,4 @@
-<a ion-item text-wrap (click)="openCourse(course)" [attr.disabled]="course.visible == 0 ? true : null" [attr.detail-none]="course.visible == 0 ? true : null" [title]="course.displayname || course.fullname">
+<a ion-item text-wrap (click)="openCourse(course)" [class.item-disabled]="course.visible == 0" [title]="course.displayname || course.fullname">
     <core-icon name="fa-graduation-cap" fixed-width item-start></core-icon>
     <h2><core-format-text [text]="course.displayname || course.fullname"></core-format-text></h2>
     <div item-end>
diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index 2e70deeca..e9cca5e8a 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/courses/components/course-progress/core-courses-course-progress.html
@@ -2,7 +2,7 @@
     <div (click)="openCourse(course)" class="core-course-thumb core-course-color-{{course.id % 10}}" [class.core-course-color-img]="course.imageThumb">
         <img *ngIf="course.imageThumb" [src]="course.imageThumb" core-external-content alt=""/>
     </div>
-    <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link">
+    <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0">
         <h2><core-format-text [text]="course.displayname || course.fullname"></core-format-text></h2>
 
         <div class="core-button-spinner" *ngIf="downloadCourseEnabled">
@@ -14,7 +14,7 @@
             <ion-spinner *ngIf="prefetchCourseData.prefetchCourseIcon == 'spinner'"></ion-spinner>
         </div>
     </ion-item>
-    <ion-item text-wrap *ngIf="course.summary && course.summary.length">
+    <ion-item text-wrap *ngIf="course.summary && course.summary.length" [class.item-disabled]="course.visible == 0">
         <p>
             <summary>
                 <core-format-text [text]="course.summary" [singleLine]="true" [clean]="true" [fullOnClick]="true"></core-format-text>