Как сделать чтобы при клике на кнопку во всех других тегам p менялось значение атрибута на false?

Question

[Oslar]

Код с примером

При клике на кнопку, тегу <p> додается атрибут contenteditable='true' и этот тег можно редактировать, но когда нажимаешь на другую кнопку, то в предыдущем теге<p> так и осталось значение true, а мне нужно чтобы становилось false или вообще убирался этот утрибут.
Чтобы сразу кликнул на любую кнопку один раз и я мог редактировать тег <p> , а не два раза кликать как сейчас.

Answer 1

[0xD34F]

Например:

$('.list_add_room').on('click', '.butt_edit', function() {
  const $el = $(this).closest('.item_contain_list').find('p');
  $('.list_add_room [contenteditable="true"]').not($el).removeAttr('contenteditable');
  $el.attr('contenteditable', (i, val) => val !== 'true').focus();
});

Есть ещё и такой вариант - убирать contenteditable при потере фокуса:

$('.list_add_room').on('click', '.butt_edit', function() {
  $(this).closest('.item_contain_list').find('p').attr('contenteditable', 'true').focus();
}).on('blur', '[contenteditable="true"]', function() {
  $(this).removeAttr('contenteditable');
});

Answer 2

[Stalker_RED]

jQuery('.list_add_room').on('click', ' .butt_edit', function() {
  jQuery('.item_contain_list p').attr('contenteditable', false)
  jQuery(this).closest('.item_contain_list').find('p').attr('contenteditable', true).focus();
});