jquery表id和禁用复选框

时间:2012-03-03 00:31:03

标签: jquery ajax json

我有一个关于在桌面上使用Jquery的问题。

我不知道我是否采取了正确的方式,因此经过大量研究后我最终在这里提问。

我想要的是比较变量数组中保存来自JSON的字符串转换响应的项目​​,如果它们与表格中的列表匹配,则复选框将被禁用。

感谢任何输入。 :)

jQuery代码

function refreshKeywords(e) {
    e.preventDefault();
    var refresh_form = jQuery(e.target);
    $.ajax({
        url: refresh_form.attr('action'),
        type: refresh_form.attr('method'),
        data: refresh_form.serialize(),
        dataType: 'json',
        success: function(response) {
            var array = $.parseJSON(response.new_list);
            alert(array);
            var html = '';
            $.each(array, function(i, item) {
                html += "<li>" + item + "</li>";
                if ($('#checkKeywords :input') == array) {
                    $('#validate').attr('disabled', true);
                }
            });
            $('#keywords').append(html);
            if ($('#checkKeywords :input') == array) {
                $('#validate').attr('disabled', true);
            }


        },
    });
}

下面是我的表HTML代码:

<table id="checkKeywords">
    <tbody>
        {% for keyword in keyword_list %}
            {% if forloop.counter|divisibleby:"3" %}<tr>{% endif %}
            <td>
              <input type="checkbox" id= "validate" name="cb" value="keywords" />
              {{keyword.keyword_name}}
            </td>
            {% if forloop.counter|add:"1"|divisibleby:"3" %}</tr>{% endif %}
        {% endfor %}
    </tbody>
</table>

2 个答案:

答案 0 :(得分:2)

这应该有助于澄清一些问题。

function refreshKeywords(e) {
    e.preventDefault();
    var refresh_form = jQuery(e.target);

    $.ajax({
        url: refresh_form.attr('action'),
        type: refresh_form.attr('method'),
        data: refresh_form.serialize(),
        dataType: 'json',
        success: function(response) {


            /* no need to use $.parseJSON , is handled by jQuery core*/
            //var array = $.parseJSON(response.new_list);
            var array = response.new_list;

            var html = '';
            $.each(array, function(i, item) {
                html += "<li>" + item + "</li>";

                /* was missing val() for input */
                if ($('#checkKeywords :input').val() == /*array*/ item) {

                    // use prop() method() in jQuery >= 1.6
                    /*$('#validate').attr('disabled', true);*/
                    $('#validate').prop('disabled', true)
                }
            });
            $('#keywords').append(html);

            /* duplication */
/*if($('#checkKeywords :input') == array) { $('#validate').attr('disabled', true); }*/

           }
        });
    }

答案 1 :(得分:1)

我认为有些错误来自以下几行:

var array = $.parseJSON(response.new_list);

返回格式正确的Javascript对象,但在与

进行比较时
if($('#checkKeywords :input') == array){...}

您将一组Javascript对象与格式良好的JSON解析的JS对象进行比较,这些对象与$('#checkKeywords :input') == array返回的值不完全兼容。

  

如果两个操作数都是对象,则将它们作为对象进行比较   只有当两个引用同一个对象时,相等性测试才为真。 MDN Docs


我建议使用一些修改来使这两个对象具有可比性,这两个修改会使两个对象根据它们是否相等而返回truefalse

<强>更新

HTML代码

<td>
   <input type="checkbox" id="validate" name="cb" 
      value="{{keyword.keyword_name}}" />{{keyword.keyword_name}}
</td>

来自 JS

...
$.each(array, function(i, item) {
    html += "<li>" + item + "</li>";
    theinputs = $('#checkKeywords :input')
    $.each(theinputs, function(i, checkbox) {
        if ($(checkbox).val() == item) {
            $(checkbox).prop('disabled', true);
            /* thanx charlietfl */
        }
    });

});
$('#keywords').append(html);
...