jquery - 禁用复选框和下拉菜单

Question

我正在为我的网站开发一个日历应用程序，但我有点麻烦。这是我需要帮助的应用程序部分的 html：

<table border="0" cellpadding="2" cellspacing="4">
<tbody>
<tr>
<td class="main b_width"><strong>Repeat Every:</strong></td>
<td class="main width">

<select name="Day">

<option value="1" selected>no recurrence</option>
<option value="2">days</option>
<option value="3">weeks</option>
<option value="4">month by day</option>
<option value="5">month by week</option>

</select>

</td>
</tr>

<tr>
<td class="main b_width"><strong>At Days:</strong></td>
<td class="main b_width">

<select name="Day">

    <option value="1" selected>First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>

</select>

<input type="checkbox" name="Monday" ;>&nbsp;Mon&nbsp;

 </td>
</tr>

我想知道的是，创建的第一个选择框，对于第一个选项“不重复”，我将如何使所有其他选择框和复选框处于非活动状态，禁用它们以便无法选择数据，任何帮助都会不胜感激

Answer 1

尝试这个：

$('select[name=Day]').eq(0).change(function () {
    $('select[name=Day]').eq(1).prop('disabled', (this.value === '1'));
    $('input[name=Monday]').prop('disabled', (this.value === '1'));
}).change();

小提琴

Answer 2

You need to use javascript to acheive this.
Add the id recurrence to your first select box and the class recurrence-input to every element that you want to be disabled when no recurrence is chosen and use the following javascript (using jquery):

$('#recurrence').on('change', function() {} {
    if ($(this).val() === '1') {
        $('.recurrence-input').attr('disabled', 'disabled');
    } else {
        $('.recurrence-input').removeAttr('disabled');
    }
});

if no-recurrence is the default value for your select box then you should make the other inputs disabled when the document is loaded as well.

Answer 3

$('table :input:gt(0)').prop('disabled', true);
$('#recur').change(function () {
    $('table :input:gt(0)').prop('disabled', ($(this).val() == 1));
});

jsFiddle 示例

但是，您的示例的一个问题是您有多个同名的选择元素。我更新了你的 HTML 来给他们唯一的 ID。请参阅 HTML 的小提琴。

Answer 4

试试这个方法：

$("#Day").change(function(e){
        if($(this).val()=='1'){
            $("#Day2").attr("disabled","disabled");
        }
    });