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 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/

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
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，更简洁：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

稍微改进的答案，在用户检查后，重新检查复选框（如果已禁用）并取消选中：

$('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;
            }
        }
    });
});

＆＃13;

$('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;
            }
        }
    });
});

＆＃13;

<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>

＆＃13;

参考文献：

Answer 2

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

$('#id_checkbox_'+index).attr("disabled", "disabled");而不是'true'和 $('input:not(#id_checkbox_'+index+')').attr("disabled", "enabled");代替'false'

Answer 3

您应该使用.checkboxradio()方法检查/取消选中并启用/禁用。

/* check */
$(".selector").prop("checked", true).checkboxradio("refresh");

/* uncheck */
$(".selector").prop("checked", false).checkboxradio("refresh");

/* enable */
$(".selector").checkboxradio("enable");

/* disable */
$(".selector").checkboxradio("disable");

从更新下拉框中重置复选框

3 个答案: