jQuery Mobile Controlgroupのチェックボックスをオフにするにはどうすればいいですか？

私の目標は、チェックボックスの項目の1つをチェックするときに他のチェックボックスをオフにすることです。あなたはjqueryのUIを使用している場合jQuery Mobile Controlgroupのチェックボックスをオフにするにはどうすればいいですか？

<form> 
    <fieldset data-role="controlgroup"> 
    <legend for="0-0">Uncheck others when check one of the items</legend> 
    <label for="0-0-4">one</label> 
    <input class="answer answer-num-6" type="checkbox" name="0-0-4" id="0-0-4" value="4"> 
    <label for="0-0-3">two</label> 
    <input class="answer answer-num-6" type="checkbox" name="0-0-3" id="0-0-3" value="3"> 
    <label for="0-0-2">three</label> 
    <input class="answer answer-num-6" type="checkbox" name="0-0-2" id="0-0-2" value="2"> 
    <label for="0-0-1">four</label> 
    <input class="answer answer-num-6" type="checkbox" name="0-0-1" id="0-0-1" value="1"> 
    <label for="0-0-0">five</label> 
    <input class="answer answer-num-6" type="checkbox" name="0-0-0" id="0-0-0" value="0"> 
    </fieldset> 
</form>

出典

2017-09-16 Jack

、ちょうど追加：

$('input.answer').on('change', function() { 
    $('input.answer').not(this).prop('checked', false); 
});

HTML：ここにjqueryの携帯1.4.2で動作していないコードはJavaScriptが...

ですcheckboxradio機能...

$('input.answer').not(this).prop('checked', false).checkboxradio("refresh");

は素敵な一日を

出典

2017-09-17 08:14:55

あなたの答えはまだ動作している間、私はちょうどそれを行うには、別の方法を追加しました... :) – deblocker

jQuery MobileはそれぞれCheckboxに、またControlgroupにも独自のスタイルを追加するため、変更された要素を含むControlgroupのrefreshメソッドを呼び出す必要があります。イベントリスナをpagecreateイベントに追加する必要があります。

$(document).on("pagecreate", "#page-one", function() { 
 
    $('input.answer').on('change', function() { 
 
    
 
    $('input.answer').not(this).prop('checked', false); 
 
    $(this).closest("fieldset").controlgroup("refresh"); // add this line 
 
    
 
    /* Display the result */ 
 
    var result = ""; 
 
    $("input.answer").each(function(index) { 
 
     var caption = $(this).parent().find("label").text(); 
 
     var checked = $(this).prop('checked'); 
 
     result += caption + ":" + checked + " "; 
 
    }); 
 
    $(this).closest("fieldset").find("legend").html(result); 
 
    
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div id="page-one" data-role="page"> 
 
    <div role="main" class="ui-content"> 
 
     <form> 
 
     <fieldset data-role="controlgroup" data-mini="true"> 
 
      <legend for="0-0">Uncheck others when check one of the items</legend> 
 
      <label for="0-0-4">one</label> 
 
      <input class="answer answer-num-6" type="checkbox" name="0-0-4" id="0-0-4" value="4"> 
 
      <label for="0-0-3">two</label> 
 
      <input class="answer answer-num-6" type="checkbox" name="0-0-3" id="0-0-3" value="3"> 
 
      <label for="0-0-2">three</label> 
 
      <input class="answer answer-num-6" type="checkbox" name="0-0-2" id="0-0-2" value="2"> 
 
      <label for="0-0-1">four</label> 
 
      <input class="answer answer-num-6" type="checkbox" name="0-0-1" id="0-0-1" value="1"> 
 
      <label for="0-0-0">five</label> 
 
      <input class="answer answer-num-6" type="checkbox" name="0-0-0" id="0-0-0" value="0"> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-09-17 10:12:59 deblocker

jQuery Mobile Controlgroupのチェックボックスをオフにするにはどうすればいいですか？

答えて

関連する問題