单选按钮启用/更改提交按钮上的 CSS答案

【问题标题】：Radio buttons enable/change CSS on submit button单选按钮启用/更改提交按钮上的 CSS
【发布时间】：2014-03-18 08:15:08
【问题描述】：

在两个单选按钮之间切换时，我正在尝试更改提交按钮的 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;
}

【问题讨论】：

有什么问题？你在期待什么？
看看 jquery .toggleClass() : api.jquery.com/toggleClass 通过将它绑定到一个事件 - 例如mouseover - 我认为你应该能够完成你所描述的。

标签： javascript jquery css radio-button

【解决方案1】：

好吧，我没有像其他人建议的那样使用 toggleClass()，所以这段代码可以做得更好，但我想我设法解决了你想要做的事情。

代码如下：

HTML（刚刚为按钮添加了一个id）：

<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><br />
   <input type="submit" value="Save changes" id='submit' class="submit-btn-disabled" disabled="disabled" /><br />
</form>

CSS是一样的

和jQuery：

$(document).ready(function() {
    $('#out').click(function() {
        $('#submit').addClass('submit-btn-disabled');
        $('#submit').removeClass('submit-btn');
    });
    $('#in').click(function() {
        $('#submit').removeClass('submit-btn-disabled');
        $('#submit').addClass('submit-btn');
    });
});

或在这里查看：http://jsfiddle.net/vugt7/

【讨论】：

【解决方案2】：

我认为我们找到了正确的解决方案！（上下搜索了几天，在这里解决了大约 2 小时，我很高兴！:) 当我在表格中添加 «<action=”” method="post"> 时，我混合了一些答案。该解决方案似乎对我来说很好；（我希望这段代码“兼容”什么所谓的响应式网站和跨浏览器兼容等等？）

    <script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    $('#out').click(function() {
        $('#submit').addClass('submit-btn-disabled');
        $('#submit').removeClass('submit-btn');
        $("#submit").prop('disabled', true);
    });
    $('#in').click(function() {
        $('#submit').removeClass('submit-btn-disabled');
        $('#submit').addClass('submit-btn');
        $("#submit").prop('disabled', false);
    });
});
});//]]>  
</script>

对我来说似乎就像火箭一样工作！ :)

【讨论】：

【解决方案3】：

我认为您想将单击事件附加到单选按钮，然后使用 toggleClass 以及 hasClass 来修改提交按钮的外观及其禁用状态。例如

$("#in").on("click", function (e) {
    var btnDisabled = $(":submit").hasClass('submit-btn-disabled');
    if(btnDisabled) {
     $(":submit").toggleClass('submit-btn-disabled').toggleClass('submit-btn');
     $(":submit").prop('disabled', false);
    }
});

【讨论】：

【解决方案4】：

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

你需要toggleClass函数和css更改-

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

CSS

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

因此，您可以添加或删除活动类，而不是更改 submit-btn 和 submit-btn-disabled 的类，从而为您提供所需的行为。

【讨论】：