Динамический JQuery в фокусе

У меня ситуация, аналогичная этой, где я есть кнопка, которая мне нужна, чтобы не было событий указателя и отображать запрещенный курсор.

Ответ, данный @Petr Odut, сработал эффектно (большое спасибо), за исключением части об индексе вкладок и фокусе.

Решение, которое он дал этой проблеме, включает жесткое кодирование индекса табуляции и атрибутов фокуса в конкретном элементе. Однако мой элемент имеет свой класс disabled, добавленный программно с помощью jQuery. Иногда он отключен, иногда нет, поэтому я не могу жестко закодировать эти атрибуты.

Я знаю, что могу установить эти атрибуты с помощью jQuery одновременно с установкой класса disabled, но эта кнопка — не единственная кнопка, для которой я хотел бы иметь эту функциональность. Я хотел бы каким-то образом установить индекс вкладки/фокус в глобальном масштабе, чтобы любая отключенная кнопка демонстрировала такое поведение.

Итак, есть ли способ сделать это?

Примечание. Я все еще новичок в stackoverflow, и у меня недостаточно репутации, чтобы задать этот вопрос прямо в комментарии к сообщению, поэтому я и делаю это. Прошу прощения, если спрашивать таким образом — неправильный этикет.

Также большое спасибо Петру.


javascript jquery css disabled-control
person Ilan_Schindler    schedule 28.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что-то вроде этого?

и чистая версия JS:

[...document.querySelectorAll('a.disabled')].forEach(a => {
a.setAttribute("tabindex", "-1");
a.setAttribute("onfocus", "this.blur()");
 console.log(a.getAttribute("tabindex"));
})


$("a.disabled").each(function(i) {
  $(this).attr('tabindex', "-1").attr('onfocus', "this.blur()");
  console.log($(this).attr('tabindex'))
});
/* Adding cursor just works: */

.disabled {
  cursor: not-allowed;
}


/* Makes link non-clickable: */

.disabled:active {
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="url" class="disabled">Disabled link</a>
<a href="url" class="disabled">Disabled link2</a>
<a href="url" class=""> NOT Disabled link3</a>

person ikiK    schedule 28.07.2020
comment
Может быть? Что произойдет, если вы добавите отключенное с помощью js, а не поместите его в html? Кроме того, где я могу разместить этот фрагмент js? - person Ilan_Schindler; 28.07.2020
comment
@Ilan_Schindler Это при загрузке страницы, добавьте это в конец вашего .disabled. учебный класс. добавь скрипт и все будет хорошо. Вы можете сделать фрагмент, нажав .<>. кнопка в редакторе. - person ikiK; 28.07.2020
comment
к сожалению, у меня нет конкретного сценария для отключения вещей, хотя на данный момент я чувствую, что, вероятно, должен. Всякий раз, когда мне нужно, я просто делаю $('element that needs to be disabled').addClass('disabled');, который я разбросал. мне нужно будет добавить эту строку везде, где я добавляю класс? - person Ilan_Schindler; 28.07.2020
comment
@Ilan_Schindler Просто добавьте атрибуты при добавлении класса: $('element that needs to be disabled').addClass('disabled').attr('tabindex', "-1").attr('onfocus', "this.blur()"); - person ikiK; 28.07.2020
comment
Большое спасибо за помощь. Я надеялся, что это не было решением, потому что мы все знаем, как раздражает каждый раз, когда нужно что-то изменить. но это то, что я получаю за копипаст. - person Ilan_Schindler; 28.07.2020
comment
@Ilan_Schindler Не могу помочь вам с этим, что нужно. ;) Ваше здоровье - person ikiK; 28.07.2020
comment
также, что является обратным этому? когда я повторно включаю элемент. мне просто удалить атрибуты tabindex и onfocus? - person Ilan_Schindler; 28.07.2020
comment
@Ilan_Schindler Вам нужно снова установить его пустым: .attr('tabindex', "").attr('onfocus', ""); - person ikiK; 28.07.2020