jQuery .prop('disabled', true) 无效

Question

我正在尝试使用复选框来切换disabled=true|false在一个<input type="text">上，我能够获取输入的值，但是我不能将输入设置为禁用。

我的jQuery/JS代码

<script>
$(function () {
    $('.date').datepicker();
    $('body').on('change', '.housing', function () {
        if ($(this).val() == 'dorms') {
            $(this).parent().next(".dorms").show();
        } else {
            $(this).parent().siblings(".dorms").hide();
        }
    });
    $('body').on('change', '.single', function () {
        if ($(this).checked) {
            $('#echo1').text($(this).prev(".roommate").val());  // this works
            $(this).prev(".roommate").val(''); // does not empty the input
            $(this).prev(".roommate").disabled = true; // does not set to disabled
            $(this).prev(".roommate").prop('disabled', true);  // does not set to disabled
            $('#echo2').text($(this).prev(".roommate").prop('disabled')); // always says false
        } else {
            $('#echo1').text($(this).prev(".roommate").val()); // this works
            $(this).prev(".roommate").disabled = false;  // always stays false
            $('#echo2').text($(this).prev(".roommate").prop('disabled'));  // always says false
        }
    });
});
</script>

我的HTML代码

<div class="registration_housing particpant_0" data-sync="0">
    <div>
        <label class="particpant_0"></label>
    </div>
    <div>
        <label>Off Campus (not included)</label>
        <input type="radio" name="housing[0]" value="none" class="housing" />
    </div>
    <div>
        <label>On Campus</label>
        <input type="radio" name="housing[0]" value="dorms" class="housing" />
    </div>
    <div class="dorms" style="display:none;">
        <div>
            <label>Checkin:</label>
            <input type="text" name="check_in[0]" class="date" />
        </div>
        <div>
            <label>Checkout:</label>
            <input type="text" name="check_out[0]" class="date" />
        </div>
        <div>
            <label>Roommate:</label>
            <input type="text" name="roommate[0]" class="roommate" />
            <input type="checkbox" name="roommate_single[0]" value="single" class="single" />check for singe-occupancy</div>
    </div>
    <div class="line">
        <hr size="1" />
    </div>
</div>
<div>
    <label id="echo1"></label>
</div>
<div>
    <label id="echo2"></label>
</div>

您可以在http://jsfiddle.net/78dQE/1/上看到此内容。

有没有想法为什么我能够获取(".roommate")的值 - 即$(this).prev(".roommate").val()，但是$(this).prev(".roommate").disabled = true;或$(this).prev(".roommate").prop('disabled', true);无法将(".roommate")设置为禁用？

- Sean

Answer 1

您的问题是在DOM元素属性中混合使用jQuery。

将 if ($(this).checked) { 更改为 if (this.checked) {

使用jQuery，您可以执行以下操作：

$(this).is(':checked') // But you could just do this.checked

并且

 $(this).prev(".roommate").prop('disabled', false); // or $(this).prev(".roommate")[0].disabled = false; 

替代

   $(this).prev(".roommate").disabled = false;

Fiddle

So you just probably need this:

 $('body').on('change', '.single', function () {
    $(this).prev(".roommate").prop('disabled', this.checked).val('');
 });

- PSL

---

详细说明一下，jQuery对象实际上是对一个或多个DOM元素的类似数组的集合。因此，如果您知道您的jQuery对象只包含一个元素，就像这个例子一样，那么您可以执行$(this).prev(".roommate")[0].disabled = false，这就是当您调用prop('disabled', false)时，jQuery在幕后为每个DOM元素（在这种情况下只有一个）执行的操作。这只是为了教育目的；使用prop()函数更易读。 - Matt Browne

注意：不要使用 [removeProp] 来删除诸如 checked、disabled 或 selected 等本机属性。这将完全删除该属性，并且一旦删除，就无法再次添加到元素中。相反，请使用 .prop() 将这些属性设置为 false。 - austin

@austin 是的，你说得有道理。我记得在我回答 jQuery 相关问题的早期阶段也曾用过同样的观点 : )。事实上，如果我没记错的话，jQuery 文档中就对 removeProp 给出了警告。 - PSL