Радио кнопки включения/изменить 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> 

Выключено (по умолчанию), кнопке отправки должна выглядеть выше (класс = "Submit-БТН-инвалиды"), включен он должен выглядеть как класс = "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

Я думаю, что вы хотите прикрепить событие щелчка к кнопкам радио, а затем использовать 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 (только что добавили идентификатор для кнопки):

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

Кажется, работает как ракета со мной! :)