Question

我正在尝试选择其中一个Item元素，然后在选中时将背景颜色更改为蓝色（禁用任何其他项目以更改背景颜色，即只能选择一个元素），然后提交表单。我只想在选择其中一个项目时提交其他警报。

＆＃13;

$(document).ready(function(){
  $('form').on('click', 'div', function(e) {        
    e.preventDefault();   
    $('#done').attr('disabled','disabled');     
    $('input').removeClass('bluebg');
    $('div').removeClass('bluebg');        
    $(this).addClass('bluebg');    

  });

  $('#ok').click(function() {
    if($('div').hasClass('bluebg'))
    {
      document.location.href='page.aspx';
    }
    else { alert('Item is not selected');}
  });        

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <div id="item1">Item1</div>
    <div id="item2">Item2</div>
    <div id="item3">Item3</div>
    <input type="button" value="OK" id="ok" />
</form>

＆＃13;

以下是输出的外观：

Answer 1

您的代码有效：

编辑：我的建议是在表单中添加一个标识符，并使用更具体的选择器，因为$('div').removeClass('bluebg');您要从所有div中删除该类页面。

＆＃13;

$(document).ready(function(){
    $('#myform').on('click', 'div', function(e){        
        e.preventDefault();   
        $('#done').attr('disabled','disabled');
        $('#myform input').removeClass('bluebg');
        $('#myform div').removeClass('bluebg');        
        $(this).addClass('bluebg');    
                
    });

    $('#ok').click(function(){
        if($('#myform div').hasClass('bluebg'))
        {
            document.location.href='page.aspx';
        }
        else { alert('Item is not selected');}
    });
});

＆＃13;

form div {
  padding:10px 0;
}
.bluebg {
  background:blue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
    <div id="item1">Item1</div>
    <div id="item2">Item2</div>
    <div id="item3">Item3</div>
    <input type="image" src="OK.gif" id="ok" />
<form>

＆＃13;

Answer 2

为了运行你的例子，我下载了我在头部显示的jquery版本，基本上我应用了3件事：

1）使用selectedId变量保留所选项目的id。 2）更改提交输入的按钮输入，并使用CSS添加图像。 3）添加隐藏的输入以存储您的选择。

<html>
<head>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
.bluebg {
    background-color: blue;
}
.ok-button {
    /* Change this for your image location */
    background: url(OK.gif); 
    /* Adjust according to your image */
    width: 20px;
    height: 20px;
}
</style>
<script>
    var selectedId = null;
    $(document).ready(function() {
        $('form').on('click', 'div', function(e) {
            e.preventDefault();
            $(this).addClass('bluebg');
            if (selectedId != null) {
                $('#' + selectedId).removeClass('bluebg');
            }
            selectedId = $(this).attr('id');
            $('#myItem').val(selectedId);
        });
        $('#myForm').submit(function() {
            if (selectedId != null) {
                return true;
            } 
            alert('Item is not selected');
            return false
        });
    });
</script>
</head>
<body>
    <form id="myForm" action="page.aspx" method="POST">
        <div id="item1">Item1</div>
        <div id="item2">Item2</div>
        <div id="item3">Item3</div>
        <input id="myItem" name="myItem" type="hidden" /> 
        <input type="submit" class="ok-button" value="" />
    </form>
</body>

如何选择表单中的项目，更改背景并提交

2 个答案: