Блог

Главная - Вопросы по программированию - как заставить события работать для списка внутри набора полей, который отключен

как заставить события работать для списка внутри набора полей, который отключен

#javascript #html #css

#javascript #HTML #css

Вопрос:

** Как заставить тег ‘li’ работать с событиями javascript, которые находятся внутри набора полей (отключены). Я не знаю, почему это не работает, пожалуйста, помогите с этим. **

 const enabledButton = document.querySelector('.file-download');

enabledButton.addEventListener('click', () => alert("ok"));  
 .file-displayer {
  padding-left: 5px;
  max-height: 50px;
  overflow-y: scroll;
  overflow-x: auto;
}

.file-download {
  display: block;
  cursor: pointer;
  color: blue;
  font-size: 12px;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: defau<
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
}  
 <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<fieldset disabled>
  <label id="77">amp;nbsp;Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;">amp;nbsp;Attach</button><input id="80" name="supdoc" type="file" required="true" accept="*"
    style="display: none;">
  <ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;"><span><i class="fa fa-minus-square w3-left" title="delete" aria-hidden="true" style="color: red; cursor: pointer;">amp;nbsp;amp;nbsp;</i><span class="sr-only">delete</span>
    <li class="file-download" role="button" tabindex="0" title="download">roles.PNG</li>
    </span>
  </ul>
</fieldset>
</body>

Комментарии:

1. Если родительский элемент отключен, дочерние элементы будут отключены…..

2. Установите для свойства fieldset disabled значение false.

Ответ №1:

Если вы добавите класс pointer-events:auto!important; в .file-download , он будет работать. если вы используете консоль разработки без события добавления указателя, вы увидите, что оно отключено как родительское.

 const enabledButton = document.querySelector('.file-download');

enabledButton.addEventListener('click', () => alert("ok"));  
 .file-displayer {
padding-left: 5px;
max-height: 50px;
overflow-y: scroll;
overflow-x: auto;
}

.file-download {
    display: block;
    cursor: pointer;
    color: blue;
    font-size: 12px;
    pointer-events:auto!important;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: defau<
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
}  
 <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset disabled>
  <label id="77">amp;nbsp;Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;">amp;nbsp;Attach</button>
  <input id="80" name="supdoc" type="file" required="true" accept="*" style="display: none;">
  
  <ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;"><span><i class="fa fa-minus-square w3-left"  title="delete" aria-hidden="true" style="color: red; cursor: pointer;">amp;nbsp;amp;nbsp;</i><span class="sr-only">delete</span><li class="file-download" role="button"
    tabindex="0" title="download">roles.PNG</li></span></ul>
    
  </fieldset>
</body>

Комментарии:

1. Добро пожаловать 🙂 пожалуйста, поддержите и примите мой ответ.

2. @shivaan не могли бы вы отметить ответ, пожалуйста?

Ответ №2:

Предложить альтернативный ответ…

Избавьтесь от тега disabled и отключите его с помощью Javascript. Присвойте идентификатор набору полей и списку, который вы хотите сохранить включенным. Затем в JS при загрузке страницы или подобном событии отключите набор полей, а затем включите список.

Я думаю, что это более простое и эффективное решение. Поскольку это конкретно только li. Параметр — для удаления записи по-прежнему независим и отключен.

Итак, вы можете щелкнуть по нему, и ничего не произойдет. (В настоящее время) Вместо того, чтобы нажимать на него и получать предупреждение, как будто это часть списка!

Смотрите фрагмент ниже:

 $(document).ready(function () {
    $('#form :input').prop('disabled', true);
    $("#btn1").prop('disabled', false);
})
        

const enabledButton = document.querySelector('.file-download');

enabledButton.addEventListener('click', () => alert("ok"));  
 .file-displayer {
padding-left: 5px;
max-height: 50px;
overflow-y: scroll;
overflow-x: auto;
}

.file-download {
    display: block;
    cursor: pointer;
    color: blue;
    font-size: 12px;
}

[role="button"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: defau<
  font-style: normal;
  -webkit-user-select: none;
  user-select: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset id="form">
  <label id="77">amp;nbsp;Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;">amp;nbsp;Attach</button>
  <input id="80" name="supdoc" type="file" required="true" accept="*" style="display: none;">
  <ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;">
    <span><i class="fa fa-minus-square w3-left" title="delete" aria-hidden="true" style="color: red; cursor: pointer;">amp;nbsp;amp;nbsp;</i><span class="sr-only">delete</span>
      <li id="btn1" class="file-download" role="button" tabindex="0" title="download">roles.PNG</li>
    </span>
  </ul>
  </fieldset>
</body>