如何在第二次单击按钮时启用所有输入标签

时间:2020-03-27 16:06:41

标签: javascript jquery html

我有三个input元素。如果我单击两个输入标签,则第三个输入标签会自动禁用。但是,当我第一次单击按钮时,它可以按我的意愿工作,但是当我第二次单击时,它不起作用。即使我单击了一个input标签,它也会禁用其余的input。有解决方案吗?

// controling button
$('#secondbutton').unbind('click');
$('#secondbutton').click(function() {
  $('#secondminvalue').prop("disabled", false);
  $('#secondpriceinput').prop("disabled", false);
  $('#secondpublication').prop("disabled", false);
});

//1st input
$('#secondminvalue').click(function() {
  $('#secondpriceinput').click(function() {
    $('#secondpublication').prop("disabled", true);
  });
  $('#secondpublication').click(function() {
    $('#secondpriceinput').prop("disabled", true);
  });
});

//2nd input
$('#secondpriceinput').click(function() {
  $('#secondminvalue').click(function() {
    $('#secondpublication').prop("disabled", true);
  });
  $('#secondpublication').click(function() {
    $('#secondminvalue').prop("disabled", true);
  });
});

//3rd input
$('#secondpublication').click(function() {
  $('#secondminvalue').click(function() {
    $('#secondpriceinput').prop("disabled", true);
  });
  $('#secondpriceinput').click(function() {
    $('#secondminvalue').prop("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <div class="intraction-box">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-xs-10  text-center">
          <div class="box">
            <div class="box-text">
              <label for="secondminvalue" id="secondminlabel" class="cols-sm-2 control-label">MIN NO OF BOOKS</label>
              <div class="input-group">
                <input type="text" class="form-control" name="catagory_id" id="secondminvalue" placeholder="Enter min no of books" />
              </div>
              <label for="secondpriceinput" id="secondlabel" class="cols-sm-2 control-label">SELECT MIN PRICE</label>
              <div class="input-group">
                <input type="text" class="form-control" name="catagory_id" id="secondpriceinput" placeholder="Enter min no of price" />
              </div>
              <label for="secondpublication" id="secondpublicationlabel" class="cols-sm-2 control-label">YEAR OF PUBLICATION</label>
              <div class="input-group">
                <input type="text" class="form-control" name="catagory_id" id="secondpublication" placeholder="Enter Year Of Publication" />
              </div>
            </div>
            <div class="box-btn">
              <button type="button" class="btn btn-info">SEARCH</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

0 个答案:

没有答案