功能“按钮禁用”从一开始

时间:2013-05-14 10:30:51

标签: javascript jquery html

我有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>

我知道我可以在输入类型后设置禁用,但是样式不会从启用更改为禁用。

3 个答案:

答案 0 :(得分:0)

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

将此行和接下来的两行类似的行更改为:

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

没问题。尝试将您的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>