3

根据常见问题解答中的示例，我一直在尝试使用 jquery 禁用表单元素

到目前为止，这是我的尝试。

<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>

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

4

3 回答 3

1

您正在使用 ID 选择器，但您的 select 元素没有 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/

于 2012-11-13T05:44:13.123 回答
0 
<select name="roomnumber" id="roomnumber">

也许？

于 2012-11-13T05:44:17.967 回答
0

您的 jquery 正在使用 id 选择器 # 但您没有 id 属性。 <select id="roomnumber">应该有帮助

于 2012-11-13T05:44:58.777 回答