jQuery: отключить все звуки, если кнопка звука отключена

Question

Привет, я пытался закодировать функцию управления звуком. Кто-то помог мне в этом, и теперь у меня возникла последняя проблема: как можно отключить кнопки, если кнопка управления звуком выключена? Кнопки должны все еще работать, потому что на них должны быть ссылки позже.

Это код:

$(document).ready(function() {

  var background_sound = document.createElement("audio");
  background_sound.src = "https://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3";
  background_sound.volume = 0.1;
  background_sound.autoPlay = true;
  background_sound.loop = true;
  background_sound.controls = true;
  background_sound.play();


  var click_sound = document.createElement("audio");
  click_sound.src = "http://soundbible.com/mp3/Stapler-SoundBible.com-374581609.mp3";
  click_sound.volume = 0.1;
  click_sound.autoPlay = false;
  click_sound.preLoad = true;
  click_sound.controls = true;


  $(".click_sound").click(function() {
    click_sound.currentTime = 0;
    click_sound.play();
  });

  $(".sound_control").click(function() {
    $(".on_off").toggle();
    if (background_sound.currentTime) {
      background_sound.currentTime = 0;
      background_sound.pause();
    } else {
      background_sound.play();
    }
  });

});

.on_off:nth-child(2) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="sound_control">Sound <span class="on_off">on</span><span class="on_off">off</span></button>

<button class="click_sound">Button One</button>
<button class="click_sound">Button Two</button>
<button class="click_sound">Button Three</button>
<button class="click_sound">Button Four</button>

Буду очень рад, если кто-нибудь сможет мне помочь! :)

Answer 1

$(".sound_control").click(function () {
    $(".on_off").toggle();
    if (background_sound.currentTime) {
      background_sound.currentTime = 0;
      background_sound.pause();
      toggleButtons(false)
    } else {
      background_sound.play();
      toggleButtons(true)
    }
  });
  function toggleButtons (isOpen) {
    if(isOpen)
    $(".click_sound").removeAttr("disabled", "disabled")
    else
    $(".click_sound").attr("disabled", "disabled")
  }

$(document).ready(function () {
  var background_sound = document.createElement("audio");
  background_sound.src =
    "https://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3";
  background_sound.volume = 0.1;
  background_sound.autoPlay = true;
  background_sound.loop = true;
  background_sound.controls = true;
  background_sound.play();

  var click_sound = document.createElement("audio");
  click_sound.src =
    "http://soundbible.com/mp3/Stapler-SoundBible.com-374581609.mp3";
  click_sound.volume = 0.1;
  click_sound.autoPlay = false;
  click_sound.preLoad = true;
  click_sound.controls = true;

  const onButtonClick = function () {
    click_sound.currentTime = 0;
    click_sound.play();
  };
  $(".click_sound").click(onButtonClick);

  $(".sound_control").click(function () {
    $(".on_off").toggle();
    if (background_sound.currentTime) {
      background_sound.currentTime = 0;
      background_sound.pause();
      toggleButtons(false);
    } else {
      background_sound.play();
      toggleButtons(true);
    }
  });
  function toggleButtons(isOpen) {
    if (isOpen) {
      $(".click_sound")
        .on("click", onButtonClick);
    } else {
      $(".click_sound").off("click");
    }
  }
});

.on_off:nth-child(2) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <button class="sound_control">Sound <span class="on_off">on</span><span class="on_off">off</span></button>
    
    <button class="click_sound">Button One</button>
    <button class="click_sound">Button Two</button>
    <button class="click_sound">Button Three</button>
    <button class="click_sound">Button Four</button>