Twitter Bootstrap Question posted in

Toggle input on button click – Twitter bootstrap

I am trying to achieve something very simple but I can’t figure it out. I would like to disable an input field whenever a button is clicked, then re-enable it when the button is clicked again.

I’m surely making this overly difficult (new to JS).

My current code is here in this FIDDLE.

Any help is appreciated. An explanation of what I have been doing wrong would also be great as I’d like to learn 🙂

$(document).ready(function() {

  var toggleText = $("#ip").val();
  
  $("#ipclear").click(function() {
    if ($("#ip").val() != 'N/A') {
      toggleText = $("#ip").val();
      $("#ip").val('N/A');
      $("#ip").prop("disabled", false);
    } else
      $("#ip").val(toggleText);
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button>
  </div>
</div>
Tags:

4

Answers


  1. 0

    Working fiddle

    You’ve to add braces {} arround else statement code or just first line $("#ip").val(toggleText); will be considered as else code :

    $(document).ready(function() {
    var toggleText = $("#ip").val();

    $("#ipclear").click(function() {

        if ($("#ip").val() != 'N/A') {
            toggleText = $("#ip").val();

            $("#ip").val('N/A');
            $("#ip").prop("disabled", true);
            $(this).removeClass('btn-default').addClass('btn-warning');
        } else{
            $("#ip").val(toggleText);
            $("#ip").prop("disabled", false);
            $(this).removeClass('btn-warning').addClass('btn-default');
        }

    });
});

    Note : you have to use addClass()/removeClass(); instead of toogleClass() in your case.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    Try this :

    $('#ipclear').click(function(){
            var attr = $('#ip').attr('disabled');
            if(attr == null)
            {
                $('#ip').attr('disabled', true);
            }
            else
            {
                $('#ip').attr('disabled', null);
            }
        });
    Login or Signup to reply.
  3. 0

    You need to manage with ToggleClass().
    On click button add one toggleclass on input and check this class condition for disabled.

    $(document).ready(function() {

  var toggleText = $("#ip").val();

  $("#ipclear").click(function() {
    $("#ip").toggleClass("click");
    if ($("#ip").hasClass('click')) {
      toggleText = $("#ip").val();
      $("#ip").val('N/A');
      $("#ip").prop("disabled", false);
    } else
      $("#ip").val(toggleText);
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
  });

});
    Login or Signup to reply.
  4. 0

    Try this , its working

    $(document).ready(function() {

  var toggleText = $("#ip").val();
  
  $("#ipclear").click(function() {
  
    if ($("#ip").val() == 'N/A') {
    $("#ip").val(toggleText);
      toggleText = $("#ip").val();
      $("#ip").prop("disabled", false);
    } else{
     
        $("#ip").val('N/A');
      $(this).toggleClass('btn-default').toggleClass('btn-warning');
      $("#ip").prop("disabled", true);
      }
  });

});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

<div class="input-group">
  <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search