0

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

这是我的代码：

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

5 回答 5

1

您可以使用 jquery 的:checked 选择器。
调用它

$("#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','#')

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

于 2012-08-01T07:48:25.753 回答
1

你可以这样做：

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

于 2012-08-01T07:50:35.180 回答
1 
<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>
于 2012-08-01T07:58:19.893 回答
0 
<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>
于 2012-08-01T08:10:32.870 回答
0

你想要类似的东西；

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

这是工作小提琴。

于 2012-08-01T07:59:21.563 回答