javascript - 从头开始功能“禁用按钮”

Question

我有 3 个单选按钮和 3 个按钮，每个按钮都属于 1 个单选按钮。我希望仅在选中相应的单选按钮时才启用按钮。

我的代码有效，但前提是我首先单击单选按钮并启动该功能。如何使该功能正常工作，以便从一开始就禁用某些按钮？

函数看起来像这样

$("input:radio[name=Kartenthema]").change(function() {         
      if (this.value == "Geburtenrate") {
         $("#karte_id").attr('src', 'kantone_interaktiv_geburten.svg');
         $("#legende_id").attr('src', 'Legenden/GebLegende.PNG'); 
         $("input[name=button1]").attr("disabled", true);
         $("input[name=button1]").addClass("disabledClass");
         $("input[name=button2]").attr("disabled", false);
         $("input[name=button2]:enabled").removeClass("disabledClass");
         $("input[name=button3]").attr("disabled", true);
         $("input[name=button3]:disabled").addClass("disabledClass");
      } else if (this.value == "Sterberate") {
         $("#karte_id").attr('src', 'kantone_interaktiv_sterbe.svg');
         $("#legende_id").attr('src', 'Legenden/SterbLegende.PNG');
         $("input[name=button1]").attr("disabled", true);
         $("input[name=button1]:disabled").addClass("disabledClass");
         $("input[name=button2]").attr("disabled", true);
         $("input[name=button2]:disabled").addClass("disabledClass");
         $("input[name=button3]").attr("disabled", false);
         $("input[name=button3]:enabled").removeClass("disabledClass");
      } else if(this.value == "Wanderung") {
         $("#karte_id").attr('src', 'kantone_interaktiv_wanderung.svg');
         $("#legende_id").attr('src', 'Legenden/WandLegende.PNG');
         $("input[name=button1]").attr("disabled", false);
         $("input[name=button1]:enabled").removeClass("disabledClass");
         $("input[name=button2]").attr("disabled", true);
         $("input[name=button2]:disabled").addClass("disabledClass");
         $("input[name=button3]").attr("disabled", true);
         $("input[name=button3]:disabled").addClass("disabledClass")                            
      }  
}

单选按钮/按钮如下所示：

<embed id="legende_id" src="Legenden/GebLegende.PNG" width="180" height="230" style="margin-left:30px" type="image/PNG" />
<h3>
  <input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
  <input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'">
    <h3>
      <input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
      <input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
        <h3>
          <input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
          <input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'">
            <br>
              <br>
                <input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" />
              </br>
            </br>
          </input></input>
        </h3>
      </input></input>
    </h3>
  </input></input>
</h3>

我知道我可以在输入类型之后放置一个禁用，但是样式不会从启用变为禁用。

Answer 1

没问题。尝试将您的 HTML 代码更改为：

<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'" disabled="disabled">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'" disabled="disabled">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" disabled="disabled">
<br>
<br>
</h3>

Answer 2

  if (this.value == "Geburtenrate") {

将此行和接下来的 2 行类似的行更改为：

  if ($(this).val() == "Geburtenrate") {

Answer 3

尝试使用$("input[name=buttonN]").removeAttr("disabled")设置控件启用。