0

いくつかの配列チェックボックス、1つの送信ボタンと1つのドロップダウンメニューがあります。1つまたは複数のチェックボックスがオンになっている場合、この送信ボタンとドロップダウンメニューを無効/有効にするにはどうすればよいですか。この送信ボタンを無効にしてユーザーがクリックすると、ダイアログボックスが表示され、チェックボックスがオンになっていないことを通知します

このようなもの：http：//jsfiddle.net/frantic912/3YbZu/

setButton(buttonGroup) {
    var retArr = new Array();
    if (buttonGroup[0]) {
        for (var i = 0; i < buttonGroup.length; i++) {
            if (buttonGroup[i].checked) {
                document.frm_search.send.disabled = true;
                alert('Please check the first checkbox!');
            }
        }
    }
}


<form  method="post" name="frm_search">
    <table>
        <tr>  
            <td align="center">
                <input type="checkbox" name="appr[]" id="appr" value="<?php echo $row['userID']; ?>" onclick="setButton(this);"/>
            </td>
        </tr>
        <tr>
            <td>bla bla bla</td>
        </tr>
        <tr>
            <td>
                <select name="slct_appr" id="slct_appr" >
                    <option value="1">-- Please Choose --</option>
            <option value="2">Approve</option>
                    <option value="3">None</option>
                </select>
            </td>
      </tr>
      <tr>
          <td align="center">
              <input name="submit" class="submit" id="send" type="submit"  value="send" />
              <input name="txt_action" type="hidden" id="txt_action" value="frm_add_submit" />
          </td>
      </tr>
    </table>
 </form>
4

3 に答える 3

0

これはjQueryでは非常に簡単です。私はコード全体に自明のコメントを入れました。

http://jsfiddle.net/Ljef5/

//monitor inputs of type checkbox for a change
$('input[type=checkbox]').change( function() {
    //how many checkboxes are now checked?
    var numChecked = $("input[type=checkbox]:checked").length;
    if (numChecked == 0) { 
        //disable the send button
        $('#send').prop('disabled', 'disabled'); 
    }
    else {
        //enable the send button
        $('#send').prop('disabled', ''); 
    }
});

//watch for when the form is submitted
$('form').submit(function() {
    var numChecked = $("input[type=checkbox]:checked").length;
    if (numChecked == 0) {
        //warn user that no checkboxes are checked
        alert('Tick a checkbox!');
        //prevent form submission
        return false;
    }
});
于 2013-01-25T02:07:52.803 に答える
0

以下のコードを試して、ボタンとドロップダウンメニューを有効/無効にします。

チェックボックスチェックイベント。

<script> 
function apply(buttonGroup) 
{
    var retArr = new Array();

    if($("#appr:checked").length > 0)
    {
        $('#send').attr('disabled',true);
        $('#slct_appr').attr('disabled',true);
    }

    if($("#appr:checked").length == 0)
    {
        $('#send').attr('disabled',false);
        $('#slct_appr').attr('disabled',false);
    }
}
</script>
于 2013-01-25T05:47:05.403 に答える
0

私の理解によると、あなたの要件はこのようなものです。デモをチェックして、問題がないかどうか教えてください。

説明

 $( "input[type=checkbox]" ).on( "click",function(){
    var n = $( "input:checked" ).length;
    if(n > 0){
        $("#send, #slct_lulus").attr("disabled",false)
        return true;
        $("#frm_submit").submit();
    }
    else{
        alert('Please Tick a checkbox!');
        //prevent form submission
        $("#send, #slct_lulus").attr("disabled",true)

    }
});

上記のコードでは、クリックするたびに、チェックボックスの長さが0より大きい場合にチェックボックスをオンにします。それ以外の場合は、送信を許可します。それ以外の場合は、送信を許可せず、同時に送信ボタンを無効にします。

このようにHTMLマークアップにもいくつかの変更があります

<td><select name="slct_lulus" id="slct_lulus" disabled=true>
                <option value="1">-- Please Choose --</option>
                <option value="2">Approve</option>
                <option value="3">None</option>
                </select></td>
    <td><input name="submit" id="send" type="submit" disabled=true  value="Send" /></td>

ページの読み込み時に、選択ボックスとボタンを無効にして、最初のページを送信しました。

于 2013-01-25T08:20:25.437 に答える