Question

我正在寻找一种解决方案，只有在选中单选按钮时，用户才能点击链接。否则应该出现一条消息（弹出窗口）。

这是我的代码：

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

Answer 1

您可以使用jquery的:checked selector 用

调用它

$("#id_of_radio_you_wanna_check:ckecked")

，然后改变

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

如果你想让它发挥作用，

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

如果你想阻止它，一切都应该正常。

Answer 2

您可以这样做：

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

其中'a_next'是锚的id。

jsfiddle

Answer 3

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

Answer 4

你想要类似的东西;

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

Here 是工作小提琴。

Answer 5

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

如果选中单选按钮，则允许单击链接

5 个答案: