javascript disabled/enabled input text form

Question

I have two input text forms. When I select first input form the second one should become disabled, and vice-versa. Here is html:

I have a piece of code that works fine in Chrome, but doesn't work in 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:

        <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?

DobreaV · Accepted Answer · 2013-04-11 05:56:27Z

1

I figured out how to solve this. Thanks to all suggestions above. Here is the solution:

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>

answered Apr 11, 2013 at 5:56

DobreaV

581 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amol Navsupe Over a year ago

just one word... awesome ... :)

Chris · Accepted Answer · 2013-04-10 08:49:14Z

0

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

edited Apr 10, 2013 at 8:49

answered Apr 10, 2013 at 8:42

Chris

5182 silver badges11 bronze badges

Comments

toddmo · Accepted Answer · 2017-04-21 14:28:56Z

0

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)

answered Apr 21, 2017 at 14:28

toddmo

22.7k14 gold badges105 silver badges120 bronze badges

Collectives™ on Stack Overflow

javascript disabled/enabled input text form

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related