Включение кнопки после нажатия другой

В приведенном ниже коде, когда я нажимаю кнопку, она отключается,

Поэтому я хочу, когда я нажимаю другую кнопку. отключенная кнопка становится активной

Например, кнопка 1 была нажата и отключена,

когда нажимается другая кнопка, например кнопка 3, кнопка 1 активируется

это похоже на то, что 1 нажимается и отключается, затем, когда 2 нажимается и отключается, тогда 1 включается Вот так

$(function () {
  $("#button1").click(function () {
    $("#button1").prop("disabled", true);
    $("p").text("You have clicked on Button 1");
    $(this).text("Selected");
  });
  $("#button2").click(function () {
    $("#button2").prop("disabled", true);
    $("p").text("You have clicked on Button 2");
    $(this).text("Selected");
  });
  $("#button3").click(function () {
    $("#button3").prop("disabled", true);
    $("p").text("You have clicked on Button 3");
    $(this).text("Selected");
  });
  $("#button4").click(function () {
    $("#button4").prop("disabled", true);
    $("p").text("You have clicked on Button 4");
    $(this).text("Selected");
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "p-5">
  <button id = "button1">Button 1</button>
  <button id = "button2">Button 2</button>
  <button id = "button3">Button 3</button>
  <button id = "button4">Button 4</button>
  <p id = "status" class = "py-3"></p>
</div>

Разве не для этого были созданы радиокнопки?

— 20.05.2024 17:18

javascript jquery

20.05.2024 16:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Существует множество подходов, один из них может быть следующим: Добавление класса ко всем кнопкам для их группировки, сохранения их значений (id и исходного текста) и привязки к ним событий нажатия следующим образом:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "p-5">
  <button class = "button" id = "button1">Button 1</button>
  <button class = "button" id = "button2">Button 2</button>
  <button class = "button" id = "button3">Button 3</button>
  <button class = "button" id = "button4">Button 4</button>
  <p id = "status" class = "py-3"></p>
</div>
<script type = "text/javascript">
        $(function () {
            let buttons = $('.button'), buttonValues = [];
            buttons.each(function() {
                let button = $(this);
                buttonValues.push({
                    id: button.attr("id"),
                    text: button.text()
                });
            });

            buttons.click(function() {
                let id = $(this).attr("id");
                
                let storedText = buttonValues.find(item => item.id === id).text;
                
                buttons.each(function() {
                    let button = $(this);
                    button.prop('disabled', false);
                    let originalText = buttonValues.find(item => item.id === button.attr("id")).text;
                    button.text(originalText);
                });

                $(this).prop('disabled', true);
                $(this).text('Selected');

                $("p").text(`You have clicked on ${storedText}`);
            });
});
    </script>

20.05.2024 17:15

вам нужно определить, какая кнопка отключена, чтобы добиться того, чтобы вы могли либо перебрать все кнопки, либо сохранить отключенную кнопку в глобальной переменной.

когда вы нажимаете кнопку, начните с включения отключенной кнопки, выполните свою логику, а затем отключите нажатую кнопку

let disabled;

$("#button1").click(function () {
    $("#button1").prop("disabled", true);
    $("p").text("You have clicked on Button 1");
    $(this).text("Selected");

     // enable the disabled one
    if (disabled) $(disabled).prop("disabled", false);

     // or find the disabled button then enable it
     document.querySelector("[disabled=true]")?.setAttribute("disabled", false);

    // now save our button as disabled
    disabled = "#button1";

  });

20.05.2024 17:15

Вы повторяете свой код, что не является хорошим дизайном (см. СУХОЙ)

Вместо этого я бы порекомендовал вам воспользоваться занятиями...

присвойте каждой из ваших кнопок один и тот же класс
дайте каждой из ваших кнопок атрибут данных, чтобы разделить их
используйте один обработчик событий, а не по одному каждому

$(function () {
  $(".mybutton").click(function () {
    // Enable all buttons
    let $all = $(".mybutton").prop("disabled", false);
    // Reset text on each button
    $all.each((i, x) => $(x).text(`Button ${$(x).data("buttonid")}`));
    // Disable THIS button, and say it's selected
    let $btn = $(this).prop("disabled", true).text("Selected");
    // Set the hint
    $("p").text(`You have clicked on Button ${$btn.data("buttonid")}`);
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "p-5">
  <button id = "button1" class = "mybutton" data-buttonid = "1">Button 1</button>
  <button id = "button2" class = "mybutton" data-buttonid = "2">Button 2</button>
  <button id = "button3" class = "mybutton" data-buttonid = "3">Button 3</button>
  <button id = "button4" class = "mybutton" data-buttonid = "4">Button 4</button>
  <p id = "status" class = "py-3"></p>
</div>

20.05.2024 17:18

Ответ принят как подходящий

Как видно из других ответов, есть много способов сделать то, что вы хотите. Один из методов, который требует ограниченных изменений в вашей логике/коде, заключается в том, чтобы каждый из ваших обработчиков событий вызывал функцию, которая активирует все кнопки. Вот и все! Добавьте одну короткую функцию EnableAll() и вызывайте ее в начале каждого обработчика. См. фрагмент рабочего кода ниже:

function enableAll( ) {
  $("#button1").prop("disabled", false);
  $("#button2").prop("disabled", false);
  $("#button3").prop("disabled", false);
  $("#button4").prop("disabled", false);
}
$(function () {
  $("#button1").click(function () {
    enableAll();
    $("#button1").prop("disabled", true);
    $("p").text("You have clicked on Button 1");
    $(this).text("Selected");
  });
  $("#button2").click(function () {
    enableAll();
    $("#button2").prop("disabled", true);
    $("p").text("You have clicked on Button 2");
    $(this).text("Selected");
  });
  $("#button3").click(function () {
    enableAll();
    $("#button3").prop("disabled", true);
    $("p").text("You have clicked on Button 3");
    $(this).text("Selected");
  });
  $("#button4").click(function () {
    enableAll();
    $("#button4").prop("disabled", true);
    $("p").text("You have clicked on Button 4");
    $(this).text("Selected");
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "p-5">
  <button id = "button1">Button 1</button>
  <button id = "button2">Button 2</button>
  <button id = "button3">Button 3</button>
  <button id = "button4">Button 4</button>
  <p id = "status" class = "py-3"></p>
</div>

20.05.2024 17:27

Вот сокращенный способ сделать это. Я использовал ванильный JS и jQuery. Я уверен, что вы сможете еще больше сжать это. Если вы используете vanilla js, вам не нужно добавлять библиотеку jquery.

Ванильный JS

(function(){
    let buttonList = document.querySelectorAll('[id*=button]'),
    status = document.getElementById('status');

    buttonList.forEach(button => button.addEventListener('click', handleButton));

    function handleButton() {
        resetState();
        this.setAttribute('disabled', '');
        status.textContent = 'You have clicked ' + this.textContent;
    }

    function resetState() {
        buttonList.forEach(button => button.removeAttribute('disabled'))
    }
})()

jQuery

$(function(){
    $('[id*=button]').on('click', handleButton);

    function handleButton() {
        $(this).parent().children().removeAttr('disabled');
        $(this).prop('disabled', true);

        $('#status').text('You have clicked ' + $(this).text())
    }
})

20.05.2024 18:09

Другой способ...
... более короткий код на чистом JS?

const pStatus = document.querySelector('p#status')
  ;
document
.querySelectorAll('button[data-txt]')
.forEach( (btn,_,buttons_All) =>
  {
  btn.onclick =_=>
    {
    buttons_All.forEach( b => b.disabled = (b === btn) );
    pStatus.textContent = `You have clicked ${btn.dataset.txt}`;
    } 
  })

button[data-txt]::before {
  content: attr(data-txt);
  }
button[data-txt]:disabled::before {
  content: 'Selected';
  }

<div class = "p-5">
  <button id = "button1" data-txt = "Button 1"></button>
  <button id = "button2" data-txt = "Button 2"></button>
  <button id = "button3" data-txt = "Button 3"></button>
  <button id = "button4" data-txt = "Button 4"></button>
  <p id = "status" class = "py-3"></p>
</div>

20.05.2024 18:18

Другие вопросы по теме

Проблема с фильтром JavaScript со сворачиваемыми строками в шаблоне блейда Laravel

TypeScript: как проверить поля ввода с помощью флажков формы

Исправьте или установите файл cookie в запросе jquery ajax

Как заполнить данные из формата json в таблицу данных и сохранить свойства данных

Галерея изображений с использованием Magnific-popup всегда всплывает первой, а не той, которая выбрана при нажатии

Могу ли я получить все гиперссылки, содержащие «@», а затем открыть их в новых вкладках?

Отображение адаптивного индикатора выполнения с процентами с использованием JS и HTML

Как получить входное значение при нажатии клавиши Enter

Перебор данных jQuery в операторе Select и предварительно выбранный сохраненный параметр

Могу ли я использовать JavaScript для удаления изображения, которое не содержит идентификатора?

Включение кнопки после нажатия другой

Ответы 6

Другие вопросы по теме

Похожие вопросы