如果选择了值,则禁用复选框
Disable checkbox if value selected
我需要一个简短的 jQuery 代码来执行以下操作。
我得到了这样的下拉菜单:
<select id="pa_size">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
以及该下拉菜单下的其他一些复选框。
现在我的问题是:
如果选择了 52 cm 选项,我想禁用复选框。
默认情况下,复选框处于启用状态,如果从 52cm 返回到 32cm,它应该会再次工作。
您可以使用 prop()
方法,如下所示。
$('#pa_size').change(function () {
$(':checkbox').prop('disabled', this.value == '52cm');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="pa_size">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
HTML
<select id="worldSelect" class="select" name="world">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input id="worldcb" type="checkbox" checked value="any" name="world">
脚本
$('#worldSelect').change(function () {
$(':checkbox').prop('disabled', this.value == '52cm');
})
请看下面的html代码:
<select id="pa_size">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input type="checkbox" class="todisable" value="1"> chbx1
<input type="checkbox" class="todisable" value="2"> chbx2
<input type="checkbox" class="todisable" value="3"> chbx3
另请参阅以下 javascript 代码:
$("#pa_size").on('change', function() {
if ($(this).val() == "52cm") {
$(".todisable").attr("disabled", "disabled");
} else {
$(".todisable").removeAttr("disabled");
}
});
如果您想在 fiddle 上 运行 进行测试,请单击 here:
我需要一个简短的 jQuery 代码来执行以下操作。
我得到了这样的下拉菜单:
<select id="pa_size">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
以及该下拉菜单下的其他一些复选框。
现在我的问题是: 如果选择了 52 cm 选项,我想禁用复选框。 默认情况下,复选框处于启用状态,如果从 52cm 返回到 32cm,它应该会再次工作。
您可以使用 prop()
方法,如下所示。
$('#pa_size').change(function () {
$(':checkbox').prop('disabled', this.value == '52cm');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="pa_size">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
HTML
<select id="worldSelect" class="select" name="world">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input id="worldcb" type="checkbox" checked value="any" name="world">
脚本
$('#worldSelect').change(function () {
$(':checkbox').prop('disabled', this.value == '52cm');
})
请看下面的html代码:
<select id="pa_size">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input type="checkbox" class="todisable" value="1"> chbx1
<input type="checkbox" class="todisable" value="2"> chbx2
<input type="checkbox" class="todisable" value="3"> chbx3
另请参阅以下 javascript 代码:
$("#pa_size").on('change', function() {
if ($(this).val() == "52cm") {
$(".todisable").attr("disabled", "disabled");
} else {
$(".todisable").removeAttr("disabled");
}
});
如果您想在 fiddle 上 运行 进行测试,请单击 here: