“非活动”提交按钮，直到您单击其中一个单选按钮 [关闭]答案

【问题标题】："inactive" submit button until you click on one of the radio buttons [closed]“非活动”提交按钮，直到您单击其中一个单选按钮 [关闭]
【发布时间】：2013-02-04 22:14:51
【问题描述】：

我希望提交按钮在您单击表单中的一个单选按钮之前处于“非活动状态”，然后在您单击后，该按钮会将背景图像从 button.png 更改为 button_active.png。

这可以只用 CSS 完成吗？还是我必须涉及 jquery / javascript？我该怎么做？

<input id="1" type="radio" name="1" value="1" />
<input id="2" type="radio" name="2" value="2" />
<input type="submit" name="submit" value="valj"  />

【问题讨论】：

您应该先自己尝试一下，然后再回来解决您遇到的任何具体问题。

标签： java jquery css forms radio-button

【解决方案1】：

您可以从禁用提交按钮开始：

<input id="1" type="radio" name="1" value="1" />
<input id="2" type="radio" name="2" value="2" />
<input type="submit" disabled name="submit" value="valj"  />

然后使用脚本绑定到单选按钮的更改事件并检查它们的值并在需要时删除 disabled 属性，类似于：

// cache reference to all radio buttons.
var $radioButtons = $("input:radio");

$radioButtons.change(function(){
    var anyRadioButtonHasValue = false;

    // iterate through all radio buttons
    $radioButtons.each(function(){
        if(this.checked){
            // indicate we found a radio button which has a value
            anyRadioButtonHasValue = true;

            // break out of each loop
            return false;
        }
    });

    // check if we found any radio button which has a value
    if(anyRadioButtonHasValue){
        // enable submit button.
        $("input[name='submit']").removeAttr("disabled");
    }
    else{
        // else is kind of redundant unless you somehow can clear the radio button value
        $("input[name='submit']").attr("disabled", "");
    }
});

DEMO - 如果选择了任何单选按钮，则启用按钮。

【讨论】：

+1 用于提供不引人注目的解决方案。
感谢您提供迭代功能来检查所有单选按钮。

【解决方案2】：

从禁用按钮开始，然后在选择其中一个单选按钮时启用它。

<input id="1" type="radio" name="1" value="1" onClick="document.getElementById('subutton').disabled = false" />
<input id="2" type="radio" name="2" value="2" onClick="document.getElementById('subutton').disabled = false" />
<input id="subutton" type="submit" name="submit" value="valj" disabled/>

【讨论】：

不，它不工作，它禁用按钮好吧，但是当我点击单选按钮时它不活动。无论如何都不是在单击时向按钮添加一个css类吗？
它确实有效，因为我已经测试过了。确保 ID 正确匹配。否，如果选择单选按钮 span>，则无法将CSS类添加到按钮
And no, you cant add a CSS class to the button when the radio button is selected....jQuery addClass() 更改/点击事件？ OP 对跨浏览器的 jQuery 解决方案开放。
@FrançoisWahl：我很确定他在问题中是如何说的，如果可能的话，他是在使用 CSS only 解决方案，然后如果不求助于 JS。