jQuery "неподдерживаемое псевдо: требуется" только в IE

Question

В моем javascript у меня есть этот jquery

$("#report_config_modal_13 :disabled:required")

В Chrome и Firefox это работает нормально, но в IE11 выдает ошибку

Syntax error, unrecognized expression: unsupported pseudo: required

Что может быть причиной этого и естьальтернативный способ сделать то же самое, что будет работать в IE11?Эта проблема возникла только после того, как я обновил jquery 2.2.3 до 3.3.1.

Answer 1

Вы просто меняете свой селектор, как показано в примере кода.

он поддерживает IE и другие браузеры.

jQuery(document).ready(function($) {

  $("input[required]:disabled").each(function(index, el) {
    $(this).addClass('class1')
  });

  $("input[disabled]").each(function(index, el) {
    $(this).addClass('class2')
  });

  $("input[required]:not(:disabled)").each(function(index, el) {
    $(this).addClass('class3')
  });

});

.class1 {
  background: red;
}
.class2 {
  background: blue;
}
.class1.class2 {
  background: yellow;
  color: red;
}
.class3 {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <input placeholder="textbox" type="text" disabled="" required="">
  <input placeholder="textbox" type="text" disabled="" >
  <input placeholder="textbox" type="text"  required="">
  <input placeholder="textbox" type="text" >
</form>

- Спасибо -

Answer 2

Как мы все знаем, атрибут id должен быть уникальным в документе.Таким образом, вы можете получить специальные элементы с помощью селектора id (используя определенный идентификатор), а затем проверить значение атрибута.например:

if ($("#input1").attr("disabled") == "disabled") {
    $("#input1").addClass("class1");
}

и

<input placeholder="textbox" class="input" id="input1" type="text" disabled="" required="">

Если вы хотите выбрать несколько элементов, вы можете использовать селектор класса или селектор элемента , например:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function(){
        $(".input[required]:disabled").each(function (index, el) {
            $(this).addClass('class1')
        });

        $(".input[disabled='']").each(function (index, el) {
            $(this).addClass('class2')
        });

        $(".input:not([disabled])").each(function (index, el) {
            $(this).addClass('class3')
        });
    });
</script>
<form action="#">
    <input placeholder="textbox" class="input" id="input1" type="text" disabled="" required="">
    <input placeholder="textbox" class="input" type="text" disabled="">
    <input placeholder="textbox" class="input" type="text" required="">
    <input placeholder="textbox" class="input" type="text">
</form>