Jquery禁用同一父级的子元素

时间:2014-03-17 18:53:35

标签: javascript jquery html checkbox

我不想复制之前提出的任何问题,但我很难解决我的问题。

我有一个只有几个复选框的表单,当取消选中复选框时,其中一些表格被隐藏以触发输出。在页面的末尾我有JQuery代码,如果我启用常规框,应禁用这些隐藏的复选框,但此代码不起作用。 每当我点击任意复选框时,其他每个复选框都会取消选中!我认为这是因为我无法瞄准唯一需要的元素。

也许你不理解,但是如果你看一下代码,你会发现到底出了什么问题!

    <form action="" method="GET" name="<?php echo $listFilter['forn_name']; ?>" id="<?php echo $listFilter['forn_name']; ?>">
        <span>
            <input type="checkbox" value="1" name="word" id="word_checkbox" class="checkbox" <?php if($listFilter['word_status'] == 1){ ?> checked <?php } ?>/>
            <input type='hidden' value='0' name='word' class="checkbox_hidden" <?php if($listFilter['word_status'] == 0){ ?> checked <?php } ?>/>
            <label class="label" for="word_checkbox">Words</label>
        </span>
        <span>
            <input type="checkbox" value="1" name="pron" id="pron_checkbox" class="checkbox" <?php if($listFilter['pronunciation_status'] == 1){ ?> checked <?php } ?> />
            <input type='hidden' value='0' name='pron' class="checkbox_hidden" <?php if($listFilter['pronunciation_status'] == 0){ ?> checked <?php } ?>/>
            <label class="label" for="pron_checkbox">Pronunciation</label>
        </span>
        <span>
            <input type="checkbox" value="1" name="pos" id="pos_checkbox" class="checkbox" <?php if($listFilter['pos_status'] == 1){ ?> checked <?php } ?> />
            <input type='hidden' value='0' name='pos' class="checkbox_hidden" <?php if($listFilter['pos_status'] == 0){ ?> checked <?php } ?>/>
            <label class="label" for="pos_checkbox">Part of speech</label>
        </span>
        <span>
            <input type="checkbox" value="1" name="meaning" id="meaning_checkbox" class="checkbox" <?php if($listFilter['meaning_status'] == 1){ ?> checked <?php } ?> />
            <input type='hidden' value='0' name='meaning' class="checkbox_hidden" <?php if($listFilter['meaning_status'] == 0){ ?> checked <?php } ?>/>
            <label class="label" for="meaning_checkbox">Meaning</label>
        </span>
        <span>
            <input type="checkbox" value="1" name="examples" id="examples_checkbox" class="checkbox" <?php if($listFilter['examples_status'] == 1){ ?> checked <?php } ?> />
            <input type='hidden' value='0' name='examples' class="checkbox_hidden" <?php if($listFilter['examples_status'] == 0){ ?> checked <?php } ?>/>
            <label class="label" for="examples_checkbox">Examples</label>
        </span>
        <script>
        $(document).ready(function(){
            $("#<?php echo $listFilter['forn_name']; ?> .checkbox").change(function() {
/* I reckon those codes bellow are causing problem */
                var parent = $(this).closest('span');
                if(this.checked){$(this).parent("span").children(".checkbox_hidden").prop('disabled', true);}
                document.forms.<?php echo $listFilter['forn_name']; ?>.submit();
            });
        });
        </script>
    </form>

感谢Alexander,JSFiddle上有一个示例代码。 http://jsfiddle.net/TH2hh/

0 个答案:

没有答案