Question

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

Answer 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 - 如果选择任何单选按钮，则启用按钮。

Answer 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/>

“非活动”提交按钮，直到您单击其中一个单选按钮

2 个答案: