从头开始功能“禁用按钮”答案

【问题标题】：function "buttons disabled" from beginning从头开始功能“禁用按钮”
【发布时间】：2013-05-14 20:29:54
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

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

【讨论】：

更改 $("input:radio[name=Kartenthema]").change(function() { 为 $("input:radio[name=Kartenthema]").click(function() {
我不确定是什么问题，如果按钮样式发生变化，您说“什么都没发生”时到底指的是什么？
“什么都没发生”我的意思是代码仍然不能像我想要的那样工作。当我单击单选按钮时，样式正在发生变化，但是当我第一次打开主页时只有一种样式。禁用按钮仅在我单击某些内容时才会改变其样式，但它们应该从一开始就看起来是禁用的。抱歉，我很难描述这个问题，因为我没有编码知识，而且英语不是我的第一语言。感谢您的耐心等待！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

我想唯一的问题是样式不能正常工作。现在，当我打开页面时按钮被禁用，但它们看起来仍然处于启用状态。样式仅在第一次点击后发生变化。
您希望每次页面加载时每个按钮上都有“disabledClass”吗？如果这是您需要的，只需将所有这些按钮上的 class="Button" 更改为 class="Button disabledClass"。
是的！太感谢了！现在它完美地工作了，正是我想要的:)