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.卓越奖。在开始按钮＆＃34;启动应用程序＆＃34;应禁用。我必须在选中其中一个单选按钮时启用此按钮，并在GET AwardType =？中发布。如果选中第一个或第二个单选按钮，则取决于1或2。我怎样才能在JavaScript中执行此操作？

Answer 1

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

}

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: