javascript禁用/啓用輸入文本格式

Question

我有兩種輸入文本格式。 當我選擇第一個輸入表單時，第二個輸入表單應該被禁用，反之亦然。 這裏是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> 

有誰知道如何解決這個問題？

Answer 1

HTML

<div id='input-container' class="input-container" style="width:155px; height: 30px;"> 
<input onclick="somefunction()" class="input" style="width: 155px;" id='myText' /> 

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

Answer 2

我figu衝出如何解決這個問題。感謝上面的所有建議。這裏是解決方案：

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> 

Answer 3

我只是做：

@{ 
    object attributes = new { @class = "form-control" }; 
    object disabledAttributes = new { @class = "form-control", disabled="disabled" }; 
} 

和T母雞：

@Html.DropDownListFor(model => model.Vehicle_ModelYear, TabVehiclesModel.YearsDropdown, Model.ModelYearEnabled ? attributes : disabledAttributes)