Функция с условием проверки наличия атрибута, его удалением и добавлением по клику

Question

Подскажите, пожалуйста, как сделать функцию с условием, чтобы при каждом клике по чекбоксу происходила проверка наличия атрибута checked, и если заданный атрибут присутствует, тогда его удаляем, если заданного атрибута нет, добавляем атрибут:

$.fn.has_Attr = function(name) {  
   return this.attr(name) !== undefined;
};

$(document).ready(function() {
   if($('#element').has_Attr('checked')) {
        $('#element').click(function(){
          $(this).removeAttr('checked');
        });
    } else {
        $('#element').click(function(){
           $(this).prop('checked');
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked id="element" />

В данном примере работает функция проверки наличия атрибута checked, и условие его удаления, а добавление атрибута не срабатывает.

Answer 1

Используя ваш метод has_Attr, можно сделать так:

$.fn.has_Attr = function(name) {  
   return this.attr(name) !== undefined;
};

$(function(){
    $('#element').click(function(){
        if( $(this).has_Attr('checked') ){
            $(this).removeAttr('checked');
        } else {
            $(this).attr('checked', '');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked id="element" />

Учтите, что данный код добавляет или удаляет только атрибут только по клику, что требуется в вопросе. Это совсем не то же самое, что свойство checked или prop('checked'), и имеет совсем другой смысл, не означающий "чекнутость" чекбокса.

БЛОГ НА HUSL

Функция с условием проверки наличия атрибута, его удалением и добавлением по клику

Ответы (1 шт):