JavaScriptでラジオボタンの1つがクリックされたときにボタンを有効にする

Question

CSSのためにボタンのように見えるリンクがあります。私のCSSクラスは次のとおりです。

.classButton { 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #818181 0%, #656565 100%) repeat scroll 0 0; 
    border-color: #fff; 
    border-radius: 3px; 
    color: #fff; 
    font-weight: bold; 
    height: 20px; 
    padding: 10px; 
    text-decoration: none; 
    text-shadow: 0 1px 1px #000; 
    width: 100px; 
} 

リンクは次のとおりです。

<p class="classButton"><a href="https://www.elso.org/Excellence/AOE/StartMyApplication.aspx" style="color:#ffffff;">Start application</a></p> 

私もJavaScriptの機能を持っている：

<script> 
$(document).ready(function(){ 
    $(".classButton").click(function(){ 
      window.location = "https://www.elso.org/Excellence/AOE/StartMyApplication.aspx" 
    }); 
}); 
</script> 

私は優秀2.賞に2つのラジオボタン1.パスを追加する必要がありますエクセレンスの開始時に "Start application"ボタンを無効にする必要があります。ラジオボタンの1つがチェックされているときにこのボタンを有効にし、GET AwardType =に投稿する必要があります。 1つまたは2つのラジオボタンがチェックされているかどうかによって異なります。 JavaScriptでこれを行うにはどうすればいいですか？

Answer 1

$(document).ready(function() { 
 
    $('input[type=radio]').on('change', function() { 
 
    var url = 'https://www.elso.org/Excellence/AOE/StartMyApplication.aspx?‌​AwardType='; 
 

 
    $(".classButton").removeClass('disabled'); 
 

 
    url += $('input[type=radio]:checked').val(); 
 
    console.log(url); 
 

 
    $(".classButton a").prop('href', url); 
 
    }); 
 

 
    $(".classButton").click(function(e) { 
 
    if ($(this).hasClass('disabled')) { 
 
     e.preventDefault(); 
 
    } 
 
    }); 
 
});

.classButton { 
 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #818181 0%, #656565 100%) repeat scroll 0 0; 
 
    border-color: #fff; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    text-shadow: 0 1px 1px #000; 
 
    width: 100px; 
 
    text-align: center; 
 
} 
 

 
.classButton a { 
 
    color: #fff; 
 
    display: block; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
} 
 

 
.classButton.disabled { 
 
    background: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="classButton disabled"> 
 
    <a href="">Start</a> 
 
</p> 
 

 
<p> 
 
    <label for="input_1">Value 1</label> 
 
    <input type="radio" id="input_1" name="radio" value="1" /> 
 
</p> 
 

 
<p> 
 
    <label for="input_2">Value 2</label> 
 
    <input type="radio" id="input_2" name="radio" value="2" /> 
 
</p>

Answer 2

1）hrefリンクのいずれかの側で<p class="classButton">を使用する代わりに、<span class="classButton">を使用して<p> cssはボタンに影響しません。ボタンの

2）：<input id="submit" type="submit" onclick="check_function()">

3）ラジオボタンの場合：

<input id="radio1" type="radio" value="Path to Excellent"> 
<input id="radio2" type="radio" value="Award of Excellence"> 

3）のJavascript：

function check_function(){ 

if (document.getElementById('radio1').checked == false) { 

     window.location.replace = "https://www.elso.org/Excellence/AOE/StartMyApplication.aspx" 
}; 

else { 

     window.location.replace = "https://www.elso.org/Excellence/AOE/StartMyApplication2.aspx" 
}; 

}