我想在列表框中选择任何内容时禁用按钮

时间：2017-03-14 05:52:16

标签： jquery html css

嗨专家我是jQuery的新手。我启用了＆＃34;添加类别＆＃34;如果从上述三个框中选择任何三个值（每个框一个值），则按钮。我想启用＆＃34;删除类别＆＃34; ＆安培; ＆＃34;保存类别＆＃34;仅当第四个框中有任何值时按钮但是，我的代码不能用于此。

＆＃13;
＆＃13; 
var one = $('.select-manage-category').val();
var two = $('.select-manage-category1').val();
var three = $('.select-manage-category2').val();


$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
  var one = $('.select-manage-category').val();
  var two = $('.select-manage-category1').val();
  var three = $('.select-manage-category2').val();
  if (one && two && three) {
    $("#add-category").prop("disabled", false);
  } else {
    $("#add-category").prop("disabled", true);
  }

});

$('#selected-lst-values').change(function() {
  if ($(this).val()) {
    $('#remove-category').prop("disabled", false);
    $('#save-categories').prop("disabled", false);
  } else {
    $('#remove-category').prop("disabled", true);
    $('#save-categories').prop("disabled", true);
  }
});

$('#add-category').click(function() {
  $(
    '.select-manage-category, .select-manage-category1, .select-manage-category2'
  ).each(function() {
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
  });
});
$('#remove-category').click(function() { // check change here
  var select = document.getElementById('selected-lst-values');

  for (var i = 0; i < 3; i++) {
    select.removeChild(select.lastChild);
  }
    if ($('#selected-lst-values').val()) {
    $('#remove-category').prop("disabled", false);
    $('#save-categories').prop("disabled", false);
  } else {
    $('#remove-category').prop("disabled", true);
    $('#save-categories').prop("disabled", true);
  }



});
$('#selected-lst-values>option').on("change", function() {
  if ($(this).val() === '') {
    $('#mnage-category-savebtn').attr({
      disabled: disabled
    });

  } else {
    $('#mnage-category-savebtn').removeAttr('disabled');
  }
});
＆＃13; 
.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}

p {
  clear: left;
  text-align: center;
}

#selected-lst-values {
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control select-manage-category" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
</select></div>

<div><select class="form-control select-manage-category1" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
		</select></div>
<div><select class="form-control select-manage-category2" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
		</select>
</div>
<p class="text-center color-red">You can add up to 20 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category" disabled>
<input id="remove-category" name="add" type="button" value="Remove Category" disabled>
<div><select id="selected-lst-values" class="form-group percent-100" size="5">
		</select></div>
<button id='save-categories' class="btn btn-md btn-radius pi-btn prodetails-btn" type="button" disabled><strong>Save Categories</strong> 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

试

$(document).ready(function(){
  if ($('#selected-lst-values').val() != null) {
    $('#remove-category').prop("disabled", false);
    $('#save-categories').prop("disabled", false);
  } else {
    $('#remove-category').prop("disabled", true);
    $('#save-categories').prop("disabled", true);
  }
});

答案 1 :(得分：0)

你刚刚更新了这个：

if (one && two && three) {
    $("#add-category").prop("disabled", false);
    $("#remove-category").prop("disabled",false);
  }


var one = $('.select-manage-category').val();
var two = $('.select-manage-category1').val();
var three = $('.select-manage-category2').val();


$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
  var one = $('.select-manage-category').val();
  var two = $('.select-manage-category1').val();
  var three = $('.select-manage-category2').val();
  if (one && two && three) {
    $("#add-category").prop("disabled", false);
  } else {
    $("#add-category").prop("disabled", true);
  }

});

$('#selected-lst-values').change(function() {
  if ($(this).val()) {
    $('#remove-category').prop("disabled", false);
    $('#save-categories').prop("disabled", false);
  } else {
    $('#remove-category').prop("disabled", true);
    $('#save-categories').prop("disabled", true);
  }
});

$('#add-category').click(function() {
  $(
    '.select-manage-category, .select-manage-category1, .select-manage-category2'
  ).each(function() {
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
  });
});
$('#remove-category').click(function() { // check change here
  var select = document.getElementById('selected-lst-values');

  for (var i = 0; i < 3; i++) {
    select.removeChild(select.lastChild);
  }
    if ($('#selected-lst-values').val()) {
    $('#remove-category').prop("disabled", false);
    $('#save-categories').prop("disabled", false);
  } else {
    $('#remove-category').prop("disabled", true);
    $('#save-categories').prop("disabled", true);
  }



});
$('#selected-lst-values>option').on("change", function() {
  if ($(this).val() === '') {
    $('#mnage-category-savebtn').prop('disabled',true)

  } else {
    $('#mnage-category-savebtn').removeAttr('disabled');
  }
});
.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}

p {
  clear: left;
  text-align: center;
}

#selected-lst-values {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control select-manage-category" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
</select></div>

<div><select class="form-control select-manage-category1" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
		</select></div>
<div><select class="form-control select-manage-category2" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
		</select>
</div>
<p class="text-center color-red">You can add up to 20 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category" disabled>
<input id="remove-category" name="add" type="button" value="Remove Category" disabled>
<div><select id="selected-lst-values" class="form-group percent-100" size="5">
		</select></div>
<button id='save-categories' class="btn btn-md btn-radius pi-btn prodetails-btn" type="button" disabled><strong>Save Categories</strong> 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>

答案 2 :(得分：0)

您可以绑定到事件或使用JQuery的SetInterval方法。 （https://www.w3schools.com/jsref/met_win_setinterval.asp）

设置间隔后，它将每3秒执行一次

setInterval(function(){  
    if ($('#selected-lst-values').val!=null) {
      $('#remove-category').prop("disabled", false);
      $('#save-categories').prop("disabled", false);
    } 
    else {
      $('#remove-category').prop("disabled", true);
      $('#save-categories').prop("disabled", true);
    } }, 3000);
相关问题
最新问题