CODEWITHSUNDEEP
javascripthtmlradio-button
Fabian Boulegue
Fabian Boulegue

Reputation: 6608

Allow to click a link if a radio button is checked

I'm searching for a solution that lets users click on links only if the radio buttons are checked. Otherwise it should a message should appear (popup).

Here is my code:

<div id="rightnav">
        <a href="katan_checklist_walkaroundcheck.html">Next</a></div>
</div>

<li class="radiobutton"><span class="name">Struct. Temp. Indic.> 38°C -not exceed 55°C</span>
            <input name="1" type="radio" value="other" /></li>
            <li class="radiobutton"><span class="name">Airplane Documents - check </span>
            <input name="2" type="radio" value="other" /></li>
            <li class="radiobutton"><span class="name">Flight Control Lock - removed</span>
            <input name="3" type="radio" value="other" /></li>
...

Upvotes: 0

Views: 2049

Answers (5)

Osama Ahmad
Osama Ahmad

Reputation: 235

<head>
<title>radio button</title>
<script type="text/javascript">
function displayResult(browser)
{
    document.getElementById("linkk").href = "http://"+browser+".com"
}
</script>
</head>
<body>
    <a id="linkk"/>Select your favorite browser:</a>
    <form>
    <input type="radio" name="browser" onclick="displayResult(this.value)" value="Firefox">Firefox<br />
    <input type="radio" name="browser" onclick="displayResult(this.value)" value="Opera">Opera<br />
    <input type="radio" name="browser" onclick="displayResult(this.value)" value="Chrome">Google Chrome<br /><br />
</form>
</body>

Upvotes: 0

Alfred
Alfred

Reputation: 21386

You want something like;

$('#mylink').click(function() {
   if($('.radiobtn').is(':checked')) {
     window.location = "katan_checklist_walkaroundcheck.html";
   }else{
     alert ("select atleast a value");
   }
});

Here is the working fiddle.

Upvotes: 0

fop6316
fop6316

Reputation: 483

<script type="text/javascript">
  function enableLink() {
    document.getElementById('nextLink').href = '/katan_checklist_walkaroundcheck.html';
  }

  function displayWarning() {
    alert('You are great fop6316. ;-)');
  }
</script>

<div id="rightnav">
  <a id="nextLink" href="javascript:displayWarning();">Next</a></div>
</div>

<ul>
  <li class="radiobutton">
    <span class="name">Struct. Temp. Indic.> 38°C -not exceed 55°C</span>
    <input name="myradiobutton" type="radio" value="other1" onclick="javascript:enableLink();"/>
  </li>
  <li class="radiobutton">
    <span class="name">Airplane Documents - check </span>
    <input name="myradiobutton" type="radio" value="other2" onclick="javascript:enableLink();" />
  </li>
  <li class="radiobutton">
    <span class="name">Flight Control Lock - removed</span>
    <input name="myradiobutton" type="radio" value="other3" onclick="javascript:enableLink();" />
  </li>
</ul>

Upvotes: 1

oleg
oleg

Reputation: 197

You can do something like this:

var anchor = document.getElementById('a_next');
anchor.onclick = function(event){
    var checked = false;
    for(var i = 1; i < 4; ++i){             
        if (document.getElementsByName(i)[0].checked) {
            checked = true;
        }                 
    }
    return checked;
}

Where 'a_next' is id of the anchor.

jsfiddle

Upvotes: 1

Jerska
Jerska

Reputation: 12002

You could use jquery's :checked selector.
Call it with 

$("#id_of_radio_you_wanna_check:ckecked")

, then change 

$("a#id_of_the_link_you_want_to_be_clickable").attr('href','the_link')

if you want to make it work,

$("a#id_of_the_link_you_want_to_be_clickable").attr('href','#')

if you want to block it ,and everything should work fine.

Upvotes: 1

Related Questions