0

我在这里遇到一个问题。首先是可视化代码： 

<input type="radio" name="user_by_list" value="" id="userbylist"/>
<div id="userbylist1">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<input type="radio" name="user_by_text" value="" id="userbytext"/>
<div id="userbytext1">
    <input type="text" value=""/>
</div>

这是我的 jQuery 代码：

$("#userbylist").click(function () {
    $("#userbytext").prop('checked', false); // for unchecking the opposite radiobutton
});
$("#userbytext").click(function () {
    $("#userbylist").prop('checked', false); // for unchecking the opposite radiobutton
});

$("#userbylist1").click(function () { // for clicking the whole div
    $("#userbylist").prop('checked', true); // checking #userbylist radiobutton 
    $("#userbytext").prop('checked', false); // unchecking #userbytext radiobutton
});
$("#userbytext1").click(function () { // for clicking the whole div
    $("#userbytext").prop('checked', true); // checking #userbytext radiobutton
    $("#userbylist").prop('checked', false); // unchecking #userbylist radiobutton
});

现在，问题是，当我单击选择标签以检查该 div 的单选按钮时，它不起作用，但是当我单击文本输入区域时，它工作正常。当您单击整个 div 时，它会根据功能进行检查和取消检查，因此也可以正常工作。我已经尝试为所有选项设置类，并在整个<select>标签上设置一个 id。这里有什么帮助吗？

PS。如果您不明白，尽管我已尽力解释问题，但我已经设置了一个示例页面

4

1 回答 1

0

我认为单击不起作用的原因是因为选项菜单弹出窗口阻止了单击的向上部分发生在与向下部分发生的相同元素上。

作为替代方案， .change() 将在所选值发生更改时运行该函数，而 .mousedown() 将在您将鼠标放在选项列表上时立即运行该函数：

    $("#userlist2").change(function () {
      $("#userlist").prop('checked', true);
      $("#usertext").prop('checked', false);
    });

    ...

    <select id="userlist2" name="userlist2">
      <option value="none">Select user</option>
      <option value="none">-----------</option>
      <option value="1">Mike007</option>
      <option value="2">UrbanSurban01</option>
    </select>
于 2012-12-30T22:09:28.713 回答