Question

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

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

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

PS。如果您不明白，虽然我已尽力解释问题，但我已设置an example page

Answer 1

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

作为替代方案，.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>

选择标签点击，jquery不“注意”

1 个答案: