0

Hummus[]、mayo[]、jam[] の 3 つのチェックボックス配列を含むフォームがあります。以下のjquery関数では、必要な数のチェックボックスがチェックされると、残りのチェックボックスが無効になります(これは現在機能しています)。

質問: それらがチェックされているので、チェックされているチェックボックスの値をテキスト フィールドの値、humus1、hummus2、mayo1、jam1 に取得しようとしています (これらのテキスト フィールドは、公開時に投稿用の非表示フィールドに変更されます)。2 つのフムス関数は機能せず、mayo および jam 関数は、チェックされているかどうかに関係なく、配列の最初のチェックボックス値のみを返します。

ここで何か助けていただければ幸いです。

jQuery(function one(){
var max = 2;
var checkboxes = $('input[type="checkbox"][name="hummus[]"]');

checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

// Trying to insert the 2 checked hummus values from the hummus array into text fields
$('input[type="text"][name="hummus1"]').val($('input[type="checkbox"][name="hummus[0]"]').val());
$('input[type="text"][name="hummus2"]').val($('input[type="checkbox"][name="hummus[1]"]').val());
});
});

jQuery(function two(){
var max = 1;
var checkboxes = $('input[type="checkbox"][name="mayo[]"]');

checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

// Trying to insert the single checked mayo value into the mayo1 text field
$('input[type="text"][name="mayo1"]').val($('input[type="checkbox"][name="mayo[]"]').val());
});
});

jQuery(function three(){
var max = 1;
var checkboxes = $('input[type="checkbox"][name="jam[]"]');

checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

// Trying to insert the single checked jam value into the jam1 text field
$('input[type="text"][name="jam1"]').val($('input[type="checkbox"][name="jam[]"]').val());
});
});

jQuery(function uncheck() {
// Uncheck all checkboxes on page load    
$(':checkbox:checked').removeAttr('checked');
})

HTML:

<form id="orderProductForm219" name="orderProductForm219" method="post">
<b>Select any TWO Hummus from this list.</b> 
<br /><br />
<input type="checkbox" name="hummus[]" value="chilli hummus with harissa"> chilli hummus with harissa<br />
<input type="checkbox" name="hummus[]" value="cumin &amp; lemon oil hummus"> cumin &amp; lemon oil hummus<br />
<input type="checkbox" name="hummus[]" value="garlic hummus"> garlic hummus<br />
<input type="checkbox" name="hummus[]" value="pumpkin, fetta &amp; dukkah hummus"> pumpkin, fetta &amp; dukkah hummus
<br /><br />
<b>and include ONE Mayonnaise from this list.</b> 
<br /><br />
<input type="checkbox" name="mayo[]" value="aioli"> aioli<br />
<input type="checkbox" name="mayo[]" value="saffron, dill &amp; mustard mayonnaise"> saffron, dill &amp; mustard mayonnaise<br />
<input type="checkbox" name="mayo[]" value="wasabi mayonnaise"> wasabi mayonnaise<br />
<input type="checkbox" name="mayo[]" value="chilli mayonnaise"> chilli mayonnaise<br />
<input type="checkbox" name="mayo[]" value="caesar dressing"> caesar dressing<br />
<input type="checkbox" name="mayo[]" value="smoked aioli"> smoked aioli
<br /><br />
<b>and include ONE Relish, Jam, Curd or Pesto from this list.</b> 
<br /><br />
<input type="checkbox" name="jam[]" value="middle eastern red pepper &amp; pomegranate pesto"> middle eastern red pepper &amp; pomegranate pesto<br />
<input type="checkbox" name="jam[]" value="aubergine relish"> aubergine relish<br />
<input type="checkbox" name="jam[]" value="beetroot relish"> beetroot relish<br />
<input type="checkbox" name="jam[]" value="tomato &amp; chilli relish"> tomato &amp; chilli relish<br />
<input type="checkbox" name="jam[]" value="taramasala"> taramasala<br />
<input type="checkbox" name="jam[]" value="preserved lemons"> preserved lemons<br />
<input type="checkbox" name="jam[]" value="rasberry &amp; white chocolate jam"> rhubarb, rasberry &amp; white chocolate jam<br />
<input type="checkbox" name="jam[]" value="apricot, saffron &amp; vanilla bean jam"> apricot, saffron &amp; vanilla bean jam<br />
<input type="checkbox" name="jam[]" value="apricot &amp; armaretto jam"> apricot &amp; armaretto jam<br />
<input type="checkbox" name="jam[]" value="rose water &amp; cardamon marmalade"> rose water &amp; cardamon marmalade<br />
<input type="checkbox" name="jam[]" value="whiskey &amp; ginger marmalade"> whiskey &amp; ginger marmalade<br />
<input type="checkbox" name="jam[]" value="lemon curd"> lemon curd<br />
<input type="checkbox" name="jam[]" value="Lemon &amp; passion fruit curd"> lemon &amp; passion fruit curd
<br />
<input type="hidden" name="productId" value="219" />
<input type="hidden" name="productTitle" value="Gift Pack" />
<input type="hidden" name="price" value="1.00" />
<input type="text" name="hummus1" id="hummus1" value="" />
<input type="text" name="hummus2" id="hummus2" value="" />
<input type="text" name="mayo1" id="mayo1" value="" />
<input type="text" name="jam1" id="jam1" value="" />
</form>
4

1 に答える 1

1

私が行った変更を見て、何が起こっているのかを理解しているかどうかを確認してください。このコードは、デモでうまく機能します。各変更関数を独自の関数にラップする必要はなく、ドキュメントの準備が整った関数で各アクションを設定するだけで済みます。

HTML:

<form id="orderProductForm219" name="orderProductForm219" method="post">
    <b>Select any TWO Hummus from this list.</b> 
    <br /><br />
    <input type="checkbox" name="hummus[]" value="chilli hummus with harissa"> chilli hummus with harissa<br />
    <input type="checkbox" name="hummus[]" value="cumin &amp; lemon oil hummus"> cumin &amp; lemon oil hummus<br />
    <input type="checkbox" name="hummus[]" value="garlic hummus"> garlic hummus<br />
    <input type="checkbox" name="hummus[]" value="pumpkin, fetta &amp; dukkah hummus"> pumpkin, fetta &amp; dukkah hummus
    <br /><br />
    <b>and include ONE Mayonnaise from this list.</b> 
    <br /><br />
    <input type="checkbox" name="mayo[]" value="aioli"> aioli<br />
    <input type="checkbox" name="mayo[]" value="saffron, dill &amp; mustard mayonnaise"> saffron, dill &amp; mustard mayonnaise<br />
    <input type="checkbox" name="mayo[]" value="wasabi mayonnaise"> wasabi mayonnaise<br />
    <input type="checkbox" name="mayo[]" value="chilli mayonnaise"> chilli mayonnaise<br />
    <input type="checkbox" name="mayo[]" value="caesar dressing"> caesar dressing<br />
    <input type="checkbox" name="mayo[]" value="smoked aioli"> smoked aioli
    <br /><br />
    <b>and include ONE Relish, Jam, Curd or Pesto from this list.</b> 
    <br /><br />
    <input type="checkbox" name="jam[]" value="middle eastern red pepper &amp; pomegranate pesto"> middle eastern red pepper &amp; pomegranate pesto<br />
    <input type="checkbox" name="jam[]" value="aubergine relish"> aubergine relish<br />
    <input type="checkbox" name="jam[]" value="beetroot relish"> beetroot relish<br />
    <input type="checkbox" name="jam[]" value="tomato &amp; chilli relish"> tomato &amp; chilli relish<br />
    <input type="checkbox" name="jam[]" value="taramasala"> taramasala<br />
    <input type="checkbox" name="jam[]" value="preserved lemons"> preserved lemons<br />
    <input type="checkbox" name="jam[]" value="rasberry &amp; white chocolate jam"> rhubarb, rasberry &amp; white chocolate jam<br />
    <input type="checkbox" name="jam[]" value="apricot, saffron &amp; vanilla bean jam"> apricot, saffron &amp; vanilla bean jam<br />
    <input type="checkbox" name="jam[]" value="apricot &amp; armaretto jam"> apricot &amp; armaretto jam<br />
    <input type="checkbox" name="jam[]" value="rose water &amp; cardamon marmalade"> rose water &amp; cardamon marmalade<br />
    <input type="checkbox" name="jam[]" value="whiskey &amp; ginger marmalade"> whiskey &amp; ginger marmalade<br />
    <input type="checkbox" name="jam[]" value="lemon curd"> lemon curd<br />
    <input type="checkbox" name="jam[]" value="Lemon &amp; passion fruit curd"> lemon &amp; passion fruit curd
    <br />
    <input type="hidden" name="productId" value="219" />
    <input type="hidden" name="productTitle" value="Gift Pack" />
    <input type="hidden" name="price" value="1.00" />
    <input type="text" name="hummus1" id="hummus1" value="" />
    <input type="text" name="hummus2" id="hummus2" value="" />
    <input type="text" name="mayo1" id="mayo1" value="" />
    <input type="text" name="jam1" id="jam1" value="" />
</form>

JavaScript:

$(document).ready(function()
{
    $('input[type=checkbox]:checked').removeAttr('checked');

    var checkboxesH = $('input[type="checkbox"][name="hummus[]"]');  
    checkboxesH.change(function()
    {
        var max = 2;
        var current = checkboxesH.filter(':checked').length;

        checkboxesH.filter(':not(:checked)').prop('disabled', current >= max);

        // Trying to insert the 2 checked hummus values from the hummus array into text fields
        var hummus1Val = $(checkboxesH.filter(':checked').get(0)).val();
        $('input[type="text"][name="hummus1"]').val(hummus1Val);
        var hummus2Val = $(checkboxesH.filter(':checked').get(1)).val();
        $('input[type="text"][name="hummus2"]').val(hummus2Val);
    });

    var checkboxesM = $('input[type="checkbox"][name="mayo[]"]');
    checkboxesM.change(function()
    {
        var max = 1;
        var current = checkboxesM.filter(':checked').length;

        checkboxesM.filter(':not(:checked)').prop('disabled', current >= max);

        // Trying to insert the single checked mayo value into the mayo1 text field
        var mayo1Val = checkboxesM.filter(':checked').val();
        $('input[type="text"][name="mayo1"]').val(mayo1Val);
    });

    var checkboxesJ = $('input[type="checkbox"][name="jam[]"]');
    checkboxesJ.change(function()
    {
        var max = 1;
        var current = checkboxesJ.filter(':checked').length;
        checkboxesJ.filter(':not(:checked)').prop('disabled', current >= max);

        // Trying to insert the single checked jam value into the jam1 text field
        var jam1Val = checkboxesJ.filter(':checked').val();
        $('input[type="text"][name="jam1"]').val(jam1Val);
    });
});
于 2013-04-23T23:32:00.877 に答える