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”＆gt;，带有“mouseover”事件：

<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

我认为您想要将单击事件附加到单选按钮，然后使用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);
    }
});

Answer 2

这应该可以解决问题 - 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的类，从而为您提供所需的行为。

Answer 3

好吧，我没有像其他人建议的那样使用 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/

Answer 4

我认为我们找到了正确的解决方案！（上下搜索几天，在这里解决了大约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>

似乎像火箭一样对我工作！：）

单选按钮在提交按钮上启用/更改CSS

4 个答案: