Jquery кнопка включения / выключения textarea validate - PullRequest
Новая
       5

Jquery кнопка включения / выключения textarea validate

0 голосов
/ 01 февраля 2020

Пример Jsfiddle

В качестве примера я хочу выполнить операцию. Это не работает в одиночку. Я бросил его на моем сервере, он не работал, когда я запускаю его Где ошибка? 

$( "#validateTxt" ).change(function() {
 if($( "#validateTxt" ).val()=="123"){
 $('#btnCheck').attr("enabled",false);
 }
 else{
  $('#btnCheck').attr("disabled",true);
 }
 
});
<!DOCTYPE html>
<html lang="en" >
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <title></title>
  

</head>
<body>
<!-- partial:index.partial.html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

////üst kodlar boostrap kütüphanesini çağırıdıgım kodlar projende yoksa ekle 

<input type="text" id="validateTxt" class="form-control" placeholder="123">


<input type="button" class="btn btn-success" value="KontrolEt" id="btnCheck" disabled>
<!-- partial -->
  <script  src="./script.js"></script>
 

</body>
</html>

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

Нет атрибута включён для элемента <input> .

Вы можете установить disabled в false если условие true, то удалите атрибут, используя .removeAttr().

Также я предпочту использовать событие input вместо change: 

$("#validateTxt").on('input', function() {
 if($("#validateTxt").val()=="123"){
   $('#btnCheck').attr("disabled", true);
 }
 else{
   $('#btnCheck').removeAttr("disabled");
 }
});
<!-- partial:index.partial.html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>


<input type="text" id="validateTxt" class="form-control" placeholder="123">

<input type="button" class="btn btn-success" value="KontrolEt" id="btnCheck" disabled>
1 голос
/ 01 февраля 2020

Вы можете сделать это следующим образом 

$('#btnCheck').attr("disabled", false);

Html не иметь атрибута enabled. Так что вам нужно установить false для атрибута disabled 

$("#validateTxt").change(function() {
  if ($("#validateTxt").val() == "123") {
    $('#btnCheck').attr("disabled", false);
  } else {
    $('#btnCheck').attr("disabled", true);
  }

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title></title>


</head>

<body>
  <!-- partial:index.partial.html -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

  ////üst kodlar boostrap kütüphanesini çağırıdıgım kodlar projende yoksa ekle

  <input type="text" id="validateTxt" class="form-control" placeholder="123">


  <input type="button" class="btn btn-success" value="KontrolEt" id="btnCheck" disabled>
  <!-- partial -->
  <script src="./script.js"></script>


</body>

</html>
...