jquery - 无法按照常见问题解答示例使用 jquery 禁用表单元素

Question

我一直在尝试使用 jquery 禁用表单元素，如 FAQ 中的示例所示。

这是我迄今为止的尝试。

<script src="jquery-1.8.2.js"></script>
<form name="myForm" action ="process.php" method ="post" >
<p>Room type:<br />
<input type="radio" name="roomtype" value="mdorm" onClick="$('#roomnumber').attr('disabled','disabled')">Mixed Dorm<br>
<input type="radio" name="roomtype" value="fdorm" onClick="$('#roomnumber').attr('disabled','disabled')">Female Dorm<br>
<input type="radio" name="roomtype" value="room">Private Room<br>
</p>
<p>Room number<br />
<select name="roomnumber">
        <option value="1">1</option>
        <option value="2">2</option>
</select>

但是，单击任何单选按钮都不会导致下拉列表被禁用。我基本上是逐字遵循这个示例的，所以我不确定我哪里出了问题。

Answer 1

您正在使用 ID 选择器，但您的选择元素没有 ID 属性:

<select id="roomnumber" name="roomnumber">

从 jQuery 1.6 开始，应使用 prop 方法而不是 attr 方法来启用/禁用表单元素(或修改其他属性)，将您的标记更改为:

<p>Room type:<br />
   <input type="radio" name="roomtype" value="mdorm">Mixed Dorm<br>
   <input type="radio" name="roomtype" value="fdorm">Female Dorm<br>
   <input type="radio" name="roomtype" value="room">Private Room<br>
</p>

您可以编写代码:

$(function(){ // document ready handler
    $('input[name="roomtype"]').change(function(){ // listen to the change event
        // disable the select element if value of radio group is not 'room'
        $('#roomnumber').prop('disabled', this.value !== 'room')
    })
})

http://jsfiddle.net/Er8zX/