功能按钮已禁用;从开始

function "buttons disabled" from beginning

本文关键字:开始 按钮 功能      更新时间:2023-09-26

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

我的代码工作,但只有当我首先单击一个Radio Button,从而启动该函数。我怎样才能使功能工作,使一些按钮从一开始就被禁用?

函数看起来像这样

$("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>

我知道我可以在输入类型后面加上disabled,但是这样样式就不会从enabled变为disabled。

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

将这一行和接下来的两行修改为:

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

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

没问题。试着把你的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>