javascript - 单选按钮启用/更改提交按钮上的 CSS

Question

当在两个单选按钮之间更改时，我试图更改提交按钮的 css 类。我找不到好的例子，希望有人能帮助我......

这是我的表格；

<form class="orderform">
    <input type="radio" name="choice" id="out" value="140" checked> <label for="out">I want A</label>
    <input type="radio" name="choice" id="in" value="40"> <label for="in">I want B</label>
    <input type="submit" value="Save changes" class="submit-btn-disabled" disabled="disabled">
</form>

禁用(默认)提交按钮应如上所示(class="submit-btn-disabled")，启用它应类似于 class="submit-btn">，并带有“鼠标悬停”事件:

<input type="submit" value=" Save changes" class="submit-btn">

此处的 css 类；

input.submit-btn-disabled{
    -webkit-box-shadow: none;     
    -webkit-box-shadow: none;   
    box-shadow: none;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
    border: none;
    background-color: #c4daaa;
    padding: 0.8em;
    font-size: 0.8em;
    color: #fff;
    cursor: pointer;
    margin-top: 1em;
}     

input.submit-btn{
    -webkit-box-shadow: none;     
    -webkit-box-shadow: none;   
    box-shadow: none;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
    border: none;
    background-color: #3A7B30;
    padding: 0.8em;
    font-size: 0.8em;
    color: #fff;
    cursor: pointer;
    margin-top: 1em;
} 

input.submit-btn:hover{
    background-color: #82bc00;
}

Answer 1

这应该可以解决问题 - http://jsfiddle.net/jpatel/FXp8E/

您需要toggleClass函数和css更改 -

JS

 $("[name=choice]").click(function(){
            $('.submit-btn').toggleClass('active');
    });

CSS

input.submit-btn.active{
background-color: #82bc00;}

因此，您可以添加或删除事件类，而不是更改submit-btn和submit-btn-disabled的类，从而获得您想要的行为。