如何在Javascript中单击复选框时更改选中/取消选中列表框

我使用div和css的id在复选框中选中和取消选中，但我的源代码不能像预期的那样

步骤1：默认情况下取消选中复选框，列表框禁用

步骤2：当我选中复选框时，列表框为启用

步骤3：返回步骤1，如果我取消选中复选框，则列表框将禁用

我的名字：

$('#parnerCheck2').click(function() {
$('#partnerName').prop("checked", false).prop("disabled", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="parnerCheck2" name="parnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName">
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>

如何按照我的描述解决问题？非常感谢

你就快到了。您可以使用复选框的选中值在列表框上设置disabled属性，并以非运算符!为前缀来反转该值，以获得所需的结果。

$('#parnerCheck2').click(function() {
$('#partnerName').prop("disabled", !$(this).prop("checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="parnerCheck2" name="parnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName" disabled>
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>

这也可以。

<body>
<script>
$(document).ready(function() {
//set initial state.
$('#partnerName').prop('disabled', true);
$('#partnerCheck').click(function() {
if ($('#partnerCheck').is(':checked')) {
$('#partnerName').prop('disabled', false);
}
});
});
</script>


<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="partnerCheck" name="partnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName">
<option value="" selected >Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
</body>

相关内容

最新更新

热门标签：