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

当在两个单选按钮之间切换时，我试图更改submit按钮的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>

---

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

$("#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);
    }
});

---

这应该可以做到-

您需要切换类函数和css更改-

JS

CSS

---

因此，您可以添加或删除活动类，而不是更改submit btn和submit btn disabled的类，这样您就可以获得所需的行为。

我没有像其他人建议的那样使用toggleClass（），因此可以改进此代码，但我想我已设法解决了您试图执行的操作

代码如下：

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

---

或者在这里查看：

我认为我们找到了正确的解决方案！（上下搜索了几天，在这里大约两个小时就解决了，我非常高兴。）当我在表单中添加

«

时，我混合了一些答案。这个解决方案似乎对我很有效；（我希望这段代码与所谓的响应式网站和跨浏览器兼容等等“兼容”）

$（窗口）。加载（函数（）{
$（文档）.ready（函数（）{
$（'#out'）。单击（函数（）{
$（'#submit'）.addClass（'submit-btn-disabled'）；
$（“#提交”）.removeClass（'submit-btn'）；
$（“#提交”）.prop（'disabled'，true）；
});
$（'#in'）。单击（函数（）{
$（“#提交”）.removeClass（'submit-btn-disabled'）；
$（'#submit'）.addClass（'submit-btn'）；
$（“#提交”）.prop（'disabled'，false）；
});
});
});//]]>  

---

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

问题是什么？你期待什么？看看jquery

.toggleClass（）

：通过将它绑定到事件，例如

鼠标悬停

，我认为你应该能够完成你所描述的。

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;
}

$("#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);
    }
});

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

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

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

$(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');
    });
});

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