javascript jquery .prop('disabled', true) 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17246953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .prop('disabled', true) not working
提问by Sean
I am attempting to toggle disabled = true|falseon 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上<input type="text">，使用复选框。我能够获取输入的值，但无法将输入设置为禁用。
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")- 即的价值。$(this).prev(".roommate").val()
但$(this).prev(".roommate").disabled = true;
OR$(this).prev(".roommate").prop('disabled', true);
不会设置(".roommate")为禁用？
回答by PSL
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('');
});
