-1

我希望提交按钮处于“非活动状态”，直到您单击表单中的一个单选按钮，然后单击后，该按钮会将背景图像从 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"  />
4

2 回答 2

8

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

<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", "");
    }
});

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

于 2013-02-04T22:30:20.763 回答
1

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

<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/>
于 2013-02-04T22:22:55.287 回答