javascript - 从更新下拉框重置复选框

Question

我试图根据 Jquery 中的选择值禁用该复选框。例如，如果用户选择 1，则会隐藏复选框 1，依此类推。

我遇到的问题是，在用户选择新选项后，我无法重置复选框，因为即使已禁用的复选框也可以作为值提交？

HTML:

<tr><th><label for="dropdown">Dropdown:</label></th><td><select id="dropdown" name="dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

</select></td></tr>

<li><label for="id_checkbox_0"><input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" /> 1</label></li>
<li><label for="id_checkbox_1"><input id="id_checkbox_1" name="checkbox" type="checkbox" value="2" /> 2</label></li>
<li><label for="id_checkbox_2"><input id="id_checkbox_2" name="checkbox" type="checkbox" value="3" /> 3</label></li>
<li><label for="id_checkbox_3"><input id="id_checkbox_3" name="checkbox" type="checkbox" value="4" /> 4</label></li>

Jquery 移动版:

 $("#dropdown").change(function() {
     //$('input:(#id_checkbox')').removeAttr('checked');
     var index = $(':selected', this).index();
     $('#id_checkbox_'+index).attr("disabled", true);
     $('#id_checkbox_'+index).attr('checked', false);
     $('input:not(#id_checkbox_'+index+')').attr("disabled", false);

});

http://jsfiddle.net/5oedargs/9/

Answer 1

要通过更改选项禁用并重新启用复选框，我建议:

$('#dropdown').change(function () {
    var opt = this.options[this.selectedIndex];
    $('li input[type="checkbox"]').prop('disabled', false).filter(function(){
        return opt.value === this.value;
    }).prop({
        'disabled' : true,
        'checked' : false
    });
});

$('#dropdown').change(function () {
    var opt = this.options[this.selectedIndex];
    $('li input[type="checkbox"]').prop('disabled', false).filter(function(){
        return opt.value === this.value;
    }).prop({
        'disabled' : true,
        'checked' : false
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>
        <label for="dropdown">Dropdown:</label>
      </th>
      <td>
        <select id="dropdown" name="dropdown">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<ul>
  <li>
    <label for="id_checkbox_0">
      <input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" />1</label>
  </li>
  <li>
    <label for="id_checkbox_1">
      <input id="id_checkbox_1" name="checkbox" type="checkbox" value="2" />2</label>
  </li>
  <li>
    <label for="id_checkbox_2">
      <input id="id_checkbox_2" name="checkbox" type="checkbox" value="3" />3</label>
  </li>
  <li>
    <label for="id_checkbox_3">
      <input id="id_checkbox_3" name="checkbox" type="checkbox" value="4" />4</label>
  </li>
</ul>

或者，更简洁地说:

$('#dropdown').change(function () {
    var opt = this.options[this.selectedIndex];
    $('li input[type="checkbox"]').prop('disabled', function() {
        var test = this.value === opt.value;
        if (test) {
            this.checked = false;
        }
        return test;
    });
});

$('#dropdown').change(function () {
    var opt = this.options[this.selectedIndex];
    $('li input[type="checkbox"]').prop('disabled', function() {
        var test = this.value === opt.value;
        if (test) {
            this.checked = false;
        }
        return test;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>
        <label for="dropdown">Dropdown:</label>
      </th>
      <td>
        <select id="dropdown" name="dropdown">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<ul>
  <li>
    <label for="id_checkbox_0">
      <input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" />1</label>
  </li>
  <li>
    <label for="id_checkbox_1">
      <input id="id_checkbox_1" name="checkbox" type="checkbox" value="2" />2</label>
  </li>
  <li>
    <label for="id_checkbox_2">
      <input id="id_checkbox_2" name="checkbox" type="checkbox" value="3" />3</label>
  </li>
  <li>
    <label for="id_checkbox_3">
      <input id="id_checkbox_3" name="checkbox" type="checkbox" value="4" />4</label>
  </li>
</ul>

还有一个稍微改进的答案，即在用户检查后重新检查复选框(如果已禁用且未选中):

$('li input[type="checkbox"]').on('change', function(){
    this.userChecked = this.checked;
});

$('#dropdown').on('change', function(){
    var opt = this.options[this.selectedIndex];
    $('li input[type="checkbox"]').prop({
        'disabled' : function () {
            return opt.value === this.value;
        },
        'checked' : function () {
            var test = opt.value === this.value;
            if (test) {
                return false
            }
            else if (!test && this.userChecked) {
                return true;
            }
        }
    });
});

$('li input[type="checkbox"]').on('change', function(){
    this.userChecked = this.checked;
});

$('#dropdown').on('change', function(){
    var opt = this.options[this.selectedIndex];
    $('li input[type="checkbox"]').prop({
        'disabled' : function () {
            return opt.value === this.value;
        },
        'checked' : function () {
            var test = opt.value === this.value;
            if (test) {
                return false
            }
            else if (!test && this.userChecked) {
                return true;
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>
        <label for="dropdown">Dropdown:</label>
      </th>
      <td>
        <select id="dropdown" name="dropdown">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<ul>
  <li>
    <label for="id_checkbox_0">
      <input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" />1</label>
  </li>
  <li>
    <label for="id_checkbox_1">
      <input id="id_checkbox_1" name="checkbox" type="checkbox" value="2" />2</label>
  </li>
  <li>
    <label for="id_checkbox_2">
      <input id="id_checkbox_2" name="checkbox" type="checkbox" value="3" />3</label>
  </li>
  <li>
    <label for="id_checkbox_3">
      <input id="id_checkbox_3" name="checkbox" type="checkbox" value="4" />4</label>
  </li>
</ul>

引用文献:

• change() .
• filter() .
• prop() .