javascript - 启用禁用选择/下拉单选

Question

我是 JQuery 的新手，请将我视为新手。我有一个 PHP 表单，其中有一个单选按钮。根据选择的 radio ，我想禁用选择/下拉菜单。以下是场景:

单选按钮:每日和杂项选择:神名

如果用户选择 Misc，则应该禁用 Select (Deity Name)，反之亦然。

我已经在我的页面上导入了 JQuery。

Header.php

!-- JQuery 1.12.3 JS -->
<script src="../js/jquery-1.12.3.min.js"></script>

HTML 代码

<tr>
<td class="col-md-4"><label class="control-label">Pooja Type</label></td>
<td class="col-md-8" align="center">
<label class='radio-inline'><input type='radio' name='poojaType' value='daily' checked>Daily</label>
<label class='radio-inline'><input type='radio' name='poojaType' value='misc'>Misc</label>
</td>
</tr>
<tr>
<td class="col-md-4"><label class="control-label" for="deity">Deity Name</label></td>
<td class="col-md-8"><select class="form-control" name="deityName"> 

请指教。

Answer 1

遵循代码:

假设您有两个单选按钮，如下所示:

<input type='radio' name='radios' id='rdbDaily' value='Daily' />&nbsp;Daily
<input type='radio' name='radios' id='rdbMisc' value='Misc' />&nbsp;Misc

和一个下拉列表如下:

<select id='selectordropdown'>
    <option>Deity Name</option>
</select>

您可以使用下面的 jquery 通过选择单选按钮来启用或禁用下拉列表:

$('input:radio[name="radios"]').change(function() {
    if ($(this).val()=='Daily') {
        $('#selectordropdown').attr('disabled', false);
    } 
    else if ($(this).val()=='Misc') {
        $('#selectordropdown').attr('disabled', true);
    }
});

或者您也可以使用下面的 jquery 来启用/禁用您的下拉列表:

$("#rdbDaily").click(function() {
    $("#selectordropdown").attr("disabled", false);
});

$("#rdbMisc").click(function() {
    $("#selectordropdown").attr("disabled", true);
});