單選按鈕啓用/ CSS改變對提交按鈕

我想更改CSS類提交按鈕，兩個單選按鈕之間切換時。我不能找到一個很好的例子，希望有人能幫助我了...單選按鈕啓用/ 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>

Disabled（默認）提交按鈕應該像上述（類= 「提交-BTN-禁用」），使能它應該看起來像類= 「提交-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; 
}

來源

2014-02-18 Hans

問題是什麼？你在期待什麼？ – Mutant

看看jquery'.toggleClass（）'：https：//api.jquery.com/toggleClass/通過綁定到一個事件 - 比如'mouseover' - 我認爲你應該能夠完成你所要的描述。 – ThomasK

我想你想點擊事件附加到單選按鈕，然後用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); 
    } 
});

來源

2014-02-18 14:10:34 Kiran

這應該做的伎倆 - 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的類，而是可以添加或刪除活動類併爲您提供所需的行爲。

來源

2014-02-18 14:11:14 Mutant

那麼我沒有使用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/

來源

2014-02-18 14:20:31 bulanmaster

我想我們找到了正確的解決方案！（上下搜索幾天，在這裏約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>

好像火箭的工作給我！ :)

來源

2014-02-19 08:01:11 Hans

單選按鈕啓用/ CSS改變對提交按鈕

回答

相關問題