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

时间:2014-09-24 20:41:37

标签: javascript html jquery-mobile checkbox

我正在尝试根据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/

3 个答案:

答案 0 :(得分: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;
&#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;
&#13;
&#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;
&#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;
&#13;
&#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;
&#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;
&#13;
&#13;

参考文献:

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

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

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