从更新下拉框重置复选框

Resetting checkboxes from updating drop down box

本文关键字：复选框 更新      更新时间：2023-09-26

我正试图根据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 Mobile：

 $("#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/

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

$('#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>

参考文献：

  • CCD_ 1
  • CCD_ 2
  • prop()

我真的不知道你想要什么，但要隐藏，你应该使用jquery隐藏http://api.jquery.com/hide/或html显示属性。要启用或禁用，请尝试使用：

$('#id_checkbox_'+index).attr("disabled", "disabled");而不是"true"，并且$('input:not(#id_checkbox_'+index+')').attr("disabled", "enabled");而不是"false"

您应该使用.checkboxradio()方法来选中/取消选中和启用/禁用。

/* check */
$(".selector").prop("checked", true).checkboxradio("refresh");
/* uncheck */
$(".selector").prop("checked", false).checkboxradio("refresh");
/* enable */
$(".selector").checkboxradio("enable");
/* disable */
$(".selector").checkboxradio("disable");
相关文章：