Question

我有一个带有一些条目和一个复选框的下拉列表。

如果我在下拉列表中选择了第二个条目，则应启用该复选框。否则，应禁用和取消选中它。我不知道如何处理这件事。

这就是我得到的：

function checkSelected() {
    if (("#test").prop('selectedIndex') === 2) {
        //disable and uncheck
    } else {
        //enable
    }
}

HTML：

<select id="test">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<input id="test2" type="checkbox" name="test2">

Answer 1

将更改事件绑定到SELECT元素，并使用.prop( propertyName, value )来操作属性。

$('#test').on('change', function() {
  if ($(this).prop('selectedIndex') === 2) {
    $('#test2').prop('disabled', true).prop('checked', false);
  } else {
    $('#test2').prop('disabled', false)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input id="test2" type="checkbox" name="test2">

Answer 2

这是我的解决方案。

首先我们以编程方式禁用该复选框，然后我们会监视所选的值，并根据要求启用或禁用这些属性。

如果这可以解决您的问题，请告诉我！

＆＃13;

var elem = $("#test2");
elem.attr("disabled", true);
elem.change(function(){
  if($(this).val() === "saab"){
    elem.attr("disabled", false);
  }else{
    elem.attr("disabled", true);
    elem.attr('checked', false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input id="test2" type="checkbox" name="test2">

＆＃13;

在下拉列表选择中禁用或启用复选框

2 个答案: