Onchange已禁用并启用了复选框

时间:2014-06-23 04:40:06

标签: javascript php jquery

我这里有一个PHP函数,当表列不为空时禁用复选框。我为onchange事件创建了一个脚本。这就是我现在所拥有的http://jsfiddle.net/Jr3L5/2/。我需要做的是,如果我选择编辑,所有非空列将按原样启用,而如果我选择添加,则应禁用所有空列启用而非空。任何帮助都会受到欢迎。

<script type="text/javascript" language="javascript">  
    function setCheckboxes3(act) {
        $('.checkbox').not(':disabled').prop('checked', act == 1 ? true : false);
    }
</script> 

while ($row = $result1->fetch_assoc()) {
    echo'<tr class="record"><td align="center">';
    if (empty($row['pr'])){
        echo '<a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a></td>';
    } else {
        echo '<a href="javascript:void(0)"></a></td>';
    }
    echo"<td>" . $row["pr"] . "</td>';
    echo'<td><input name="checkbox[]" type="checkbox" id="checkbox[]" value="' . $row['id'] . '"'.($row['pr'] == ""?"disabled ":"").' style="cursor:pointer;" class="checkbox"></td></tr>';
}

1 个答案:

答案 0 :(得分:1)

已解决 - http://jsfiddle.net/dwebexperts/U4G8G/
试试这个 -

$("a.button").hide();
$(function() {
    $('#selectbox').change(function(){
        if ($('option:selected',$(this)).index() == '1') {
            $("a.button.edit").show();
            $("a.button.add").hide();
            $("a.button.chkmenu").show();
            //$(":input.pr([value==''])").prop("disabled", true);
            $('input.pr').each(function() {
                if($(this).val()==""){
                    $(this).prop("disabled", true);
                }
                if($(this).val()!=""){
                    $(this).prop("disabled", false);
                }
            });
        } else if ($('option:selected',$(this)).index() == '2') {
            $("a.button.edit").hide();
            $("a.button.add").show();
            $("a.button.chkmenu").show();
            $('input.pr').each(function() {
                if($(this).val()==""){
                    $(this).prop("disabled", false);
                }
                if($(this).val()!=""){
                    $(this).prop("disabled", true);
                }
             });
        } else {
            $("a.button.edit").hide();
            $("a.button.add").hide();
            $("a.button.chkmenu").hide();
            $('input.pr').each(function() {
               $(this).prop("disabled", false);
            });
        }
        });
    });

<强> ############################################ ###################

更新后的代码
http://jsfiddle.net/dwebexperts/U4G8G/
我对HTML和JQUERY代码进行了更改: -

HTML代码:

<table>
    <tr>
        <td><input class="pr" id="1" value="pr" type="text" /></td>
        <td><input name="checkbox[]" type="checkbox" id="checkbox[]" class="checkbox new1"/></td>
    </tr>
    <tr>
        <td><input class="pr" id="2"  type="text"/></td>
        <td><input name="checkbox[]" type="checkbox" id="checkbox[]" class="checkbox new2"/></td>
    </tr>
    <tr>
        <td><input class="pr"  id="3"  value="XYZ" type="text"/></td>
        <td><input name="checkbox[]" type="checkbox" id="checkbox[]" class="checkbox new3"/></td>
    </tr>
    <tr>
        <td><input class="pr"  id="4"  type="text"/></td>
        <td><input name="checkbox[]" type="checkbox" id="checkbox[]" class="checkbox new4"/></td>
    </tr>
    <tr>
        <td><input class="pr"  id="5"  type="text"/></td>
        <td><input name="checkbox[]" type="checkbox" id="checkbox[]" class="checkbox new5"/></td>
    </tr>

</table>
<select id="selectbox">
    <option></option>
    <option value="one">1</option> 
    <option value="two">2</option> 
</select>
  <a class="button add" style="cursor:pointer;"><span><b>Add Purchase Request</b></span></a>
  <a class="button edit" style="cursor:pointer;"><span><b>Edit Purchase Request</b></span></a>
  <a class="button remove" style="cursor:pointer;" name="remove"><span><b>Remove Purchase Request</b></span></a> 
  <a href="javascript:setCheckboxes3(true);" class="button chkmenu"><span><b>Check All</b></span></a>
  <a href="javascript:setCheckboxes3(false);" class="button chkmenu"><span><b>Uncheck All</b></span></a>

JQUERY CODE: -

$("a.button").hide();
$(function() {
    $('#selectbox').change(function(){
        if ($('option:selected',$(this)).index() == '1') {
            $("a.button.edit").show();
            $("a.button.add").hide();
            $("a.button.chkmenu").show();
            //$(":input.pr([value==''])").prop("disabled", true);
            $('input.pr').each(function() {
                if($(this).val()==""){
                    var inputid = $(this).attr("id");
                    $(".new"+inputid).prop("disabled", true);
                }
                if($(this).val()!=""){                    
                    var inputid = $(this).attr("id");
                    $(".new"+inputid).prop("disabled", false);
                }
            });
        } else if ($('option:selected',$(this)).index() == '2') {
            $("a.button.edit").hide();
            $("a.button.add").show();
            $("a.button.chkmenu").show();
            $('input.pr').each(function() {
                if($(this).val()==""){                    
                    var inputid = $(this).attr("id");
                    $(".new"+inputid).prop("disabled", false);
                }
                if($(this).val()!=""){                    
                    var inputid = $(this).attr("id");
                    $(".new"+inputid).prop("disabled", true);
                }
             });
        } else {
            $("a.button.edit").hide();
            $("a.button.add").hide();
            $("a.button.chkmenu").hide();
            $('input.pr').each(function() {
               $("input[type=checkbox]").prop("disabled", false);
            });
        }
        });
    });