ボタンをクリックして入力を切り替える

Question

私は非常に簡単なことを達成しようとしていますが、わかりません。ボタンをクリックするたびに入力フィールドを無効にしてから、再度ボタンをクリックしたときに再び有効にしたいと思います。

私は確かにこれを過度に難しくしています（JSの新機能）。

現在のコードはこちらになりますFIDDLE

何か助けていただければ幸いです。私はあなたがarroundの括弧{}を追加しました:)

$(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>

Answer 1

Working fiddle

を学びたいと私が間違ってやってきたことも素晴らしいことだ何の説明else文コードまたは最初の行$("#ip").val(toggleText);はelseコードとみなされます。

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

    }); 
}); 

注：の場合は、toogleClass()の代わりにaddClass()/removeClass();を使用する必要があります。

これが役に立ちます。

Answer 2

はこれを試してみてください：

$('#ipclear').click(function(){ 
      var attr = $('#ip').attr('disabled'); 
      if(attr == null) 
      { 
       $('#ip').attr('disabled', true); 
      } 
      else 
      { 
       $('#ip').attr('disabled', null); 
      } 
     }); 

Answer 3

あなたは（）ToggleClassで管理する必要があります。 ボタンをクリックすると、入力時にトグルクラスを1つ追加し、このクラス条件が無効になっていることを確認します。

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

}); 

Answer 4

そのがelse` `の後にカッコがありません

$(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>