jq操作常见表单控件的方法总结

• 单选框(radio)

  • 获取当前选中的值: $('.selector:checked').val()
  • 设置选中的值: $('.selector').val([selectedValue]); (注意不是$('.selector').val(selectedValue), 这样会将所有单选框的值设为selectedValue,关于val([value])的用法可以查看jq的val用法说明)

  • 禁止单选框选择,同时表单提交时该值能一起提交

    //这个技巧就是将除选中的那个单选框之外的都设置为disabled,这样就无法切换到其他的单选框, 同时选中的radio没有被disabled所以表单提交时,该值也能提交
    //js脚本如下
    <script>
    $(':radio:not(:checked)').attr('disabled', true);
    </script>

• 多选框(checkbox)

  • 获取选中值: selectedArray = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

• 下拉选择框(select)

  • 怎么禁止下拉框选择,不使用disabled,因为disable不能表单提交?

    <style>
    select[readonly] {
        background: #eee;
        cursor: no-drop;
    }
    select[readonly] option {
        display: none;
    }
    </style>
    然后在你要禁用的select标签上加上readonly属性

常见操作

• select下选择框移除底下所有option选项,但保留第一个option选项?

  $('#selectId option:not(:first)').remove();//假设你的select下拉框id为selectId