alenan2013 alenan2013 - 19 days ago 6
HTML Question

Enable a button when one of radio buttons is clicked in JavaScript

I have a link that looks like a button because of CSS. My CSS class is:

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


The link is:

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


I also have JavaScript function:

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


I should add two radio buttons 1. Path to Excellent 2. Award of Excellence. At start the button "Start application" should be disabled.I have to enable this button when one of the radio buttons is checked, and post in GET AwardType=? 1 or 2, depends on that if the first or the second radio button is checked. How can I do this in JavaScript?

Answer

$(document).ready(function() { 
  $('input[type=radio]').on('change', function() {
    var url = 'http://example.com?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;
  height: 20px;
  padding: 10px;
  text-decoration: none;
  text-shadow: 0 1px 1px #000;
  width: 100px;
  text-align: center;
}

.classButton a {
  color: #fff;
  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>

Comments