在JavaScript中单击某个单选按钮时启用按钮

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> 

我要补充的两个单选按钮1.路径优秀奖2卓越。开始时应该禁用“启动应用程序”按钮。当选中其中一个单选按钮时，我必须启用此按钮，并以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" 
}; 

}