我有两个输入文本表单。 当我选择第一个输入表单时,第二个输入表单应该被禁用,反之亦然。 这是 HTML:
我有一段代码在 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>
这是 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>
有人知道如何解决这个问题吗?
最佳答案
我想出了如何解决这个问题。感谢以上所有建议。解决办法如下:
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:
<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>
关于javascript 禁用/启用输入文本表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15920911/