jquery .prop('disabled'， true)不起作用

I am attempting to toggle disabled = true|false on a <input type="text">, using a checkbox. I am able to get the value of the input, but I cannot set the input to disabled.

我正在尝试使用复选框在上切换disabled = true|false。我可以得到输入的值，但不能设置对禁用的输入。

my jquery/js code

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

my html code

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

you can see this at http://jsfiddle.net/78dQE/1/

您可以在http://jsfiddle.net/78dQE/1/上看到这一点

Any idea why I can get the value of (".roommate") - ie. $(this).prev(".roommate").val()
but
$(this).prev(".roommate").disabled = true;
OR
$(this).prev(".roommate").prop('disabled', true);
will not set (".roommate") to disabled?

知道为什么我能得到(. .roommate)这个词的价值吗?(美元).prev(.roommate).val(),但美元(这).prev(“.roommate”)。禁用= true。美元(这).prev(“.roommate”)。道具(“禁用”,真正的);不会将(.roommate)设置为残疾吗?

1 个解决方案

#1

Your issue is mixing jquery with DOM element attributes

您的问题是将jquery与DOM元素属性混合

change if ($(this).checked) { to if (this.checked) {

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

With jquery you would do

使用jquery就可以了

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

And

和

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

instead of

而不是

   $(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('');
 });