javascript javascript禁用/启用输入文本表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15920911/
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
javascript disabled/enabled input text form
提问by DobreaV
I have two input text forms. When I select first input form the second one should become disabled, and vice-versa. Here is html:
我有两个输入文本表单。当我选择第一个输入表单时，第二个输入表单应该被禁用，反之亦然。这是html：
I have a piece of code that works fine in Chrome, but doesn't work in Firefox
我有一段代码在 Chrome 中运行良好，但在 Firefox 中不起作用
<div id='input-container' style="width:155px; height: 30px;">
<input onclick="somefunction()" class="input" style="width: 155px;" id='myText' />
</div>
<br />
<div id='input-container1' style="width:155px; height: 30px;">
<input onclick="somefunction1()" class="input1" style="width: 155px;" id='myText1' />
</div>
and here is Jquery:
这是 Jquery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// disable all the input boxes
$(".input").attr("disabled", true);
$(".input1").attr("disabled", true);
// add handler to re-enable input boxes on click
$("div:has(.input)").click(function() {
$("#myText").removeAttr("disabled");
$("#myText1").val(" ");
$("#myText1").attr("disabled",true);
});
$("div:has(.input1)").click(function() {
$("#myText1").removeAttr("disabled");
$("#myText").val(" ");
$("#myText").attr("disabled",true);
});
});
</script>
Does anybody know how to solve this?
有谁知道如何解决这个问题？
回答by DobreaV
I figured out how to solve this. Thanks to all suggestions above. Here is the solution:
我想出了如何解决这个问题。感谢以上所有建议。这是解决方案：
HTML
HTML
<span style="position:relative;">
<input id="text1" type="text" disabled />
<div id = "div1" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</span>
<span style="position:relative;">
<input id="text2" type="text" disabled />
<div id = "div2" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</span>
JS:
JS：
<script type="text/javascript">
$('#div1').click(function(){
$('#text1').prop("disabled", false).focus();
$('#text2').prop("disabled", true);
$("#text2").val(" ");
});
$('#div2').click(function(){
$('#text1').prop("disabled", true);
$('#text2').prop("disabled", false).focus();
$("#text1").val(" ");
});
</script>
回答by toddmo
I just did:
我已经做了：
@{
object attributes = new { @class = "form-control" };
object disabledAttributes = new { @class = "form-control", disabled="disabled" };
}
and then:
接着：
@Html.DropDownListFor(model => model.Vehicle_ModelYear, TabVehiclesModel.YearsDropdown, Model.ModelYearEnabled ? attributes : disabledAttributes)
回答by Chris
HTML
HTML
<div id='input-container' class="input-container" style="width:155px; height: 30px;">
<input onclick="somefunction()" class="input" style="width: 155px;" id='myText' />
JavaScript
JavaScript
var containers = $('.input-container'),
inputs = $('.input');
// disable
inputs.attr('disabled','disabled');
containers('click',function() {
inputs.attr('disabled','disabled').val(' ');
$(this).find('.input').removeAttr('disabled').focus();
});
