Question

请考虑以下形式：

<form>
    <input type="radio" name="rad" id='A' value="A"><label for="A">A</label><br>       
    <input type="radio" name="rad" id='B' value="B"><label for="B">B</label>
    <select name='choice'>
        <option selected disabled>Make a choice</option>
        <option value='1'>Choice 1</option>
        <option value='2'>Choice 2</option>
    </select>
</form>

如果用户点击radiobutton A，他可以自由选择在选择框中选择的内容。如果用户点击radiobutton B，那么我想让选择框不可点击，它应该选择Choice 1.

如何使用jQuery实现这一目标？我最初的想法是在单选按钮B处于活动状态时禁用选择框，但是表单将不会发送字段选项的值，因为它已被禁用。

Answer 1

正如您所注意到的，您不能直接禁用选择，因为它的值不会在任何请求中发送。

要实现此目的，您可以挂钩无线电输入的change事件并检查所选值。如果选择B，则可以在选择中使用设置pointer-events: none并将其值强制为1。试试这个：

$('input[type="radio"]').change(function() {
    var $radio = $(this), $select = $('select');

    if ($radio.val() == 'A') {
        $select.removeClass('no-pointer');
    }
    else {
        $select.val('1').addClass('no-pointer');
    }
})

.no-pointer {
    pointer-events: none
}

Working example

请注意，IE10或更低版本不支持pointer-events。如果您需要支持较旧的浏览器，则可以禁用select并使用隐藏字段在form提交时发送值。

使选择框不可点击

1 个答案: