<div class="inputs">
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
<div class="input-wrapper">
<input type="text" disabled="true" class="input">
<button>Активировать</button>
</div>
</div>
.input-wrapper {
margin-bottom: 10px;
}
const inputs = document.querySelector('.inputs');
inputs.addEventListener('click', e => {
const target = e.target;
if(target.tagName === 'BUTTON') {
const input = target.previousElementSibling;
input.disabled = !input.disabled;
target.textContent = input.disabled ? 'Активировать' : 'Деактивировать';
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.