У меня есть этот Javascript:
let projectBox = document.getElementById("invoice_project_id");
let taskBoxes = document.getElementsByClassName("tasks");
function filterTasks() {
let project = projectBox.options[projectBox.selectedIndex];
let results = Array.from(taskOptions).filter(task => {
return task.getAttribute("data-project-id") == project.value || task.value == "";
})
Array.from(taskBoxes).forEach(taskBox => {
let source = taskBox.closest(".source");
if (results.length > 2) {
source.classList.add("active");
taskBox.innerHTML = "";
results.forEach(result => {
if (result.getAttribute("data-charged") == "true") {
result.disabled = true; // some options get disabled here which works perfectly in all browsers except Firefox
}
taskBox.add(result.cloneNode(true));
})
} else {
source.classList.remove("active");
}
})
}
Он отлично работает во всех браузерах, кроме Firefox (последняя версия на Mac).
Почему-то в Firefox отключенварианты выбора не (!) серого цвета. Они отключены в HTML, но похожи на все остальные, включенные опции.
Что мне здесь не хватает?
Это ошибка Firefox или что-то не так с моим кодом?
HTML:
<select class="tasks">
<option value="">Please select a task...</option>
<option data-project-id="375" data-charged="false" value="413">Do something</option>
<option data-project-id="375" data-charged="true" value="196" disabled="">Do something else</option>
<option data-project-id="375" data-charged="true" value="199" disabled="">Yet another task</option>
</select>